咪咪醬‧阿財肥貓俱樂部

[CSS語法]DIV 區塊內部樣式設定_高度寬度與線條

<div style="width:300px;height:60px;border:3px #cccccc dashed;"></div>

呈現結果

範例中我們設定了 width=300px 的意思是 div 寬度為 300px，高度設為60px（height:60px）

設定了邊框（border）粗細 3px border-width :3px 也可以border-width:medium (可用的值為 thin (薄)、medium (中等)、thick (厚)，或是一個數字)

顏色是灰色（#cccccc）

線條為虛線（dasched）。

我們可以將方向 (top - 上、bottom - 下、left - 左、right - 右) 和樣式、寬度、及顏色合起來而成為一個屬性。舉例來說，

border-top-style 屬性就是用來設定上邊框的樣式。

<div style="width:300px;height:60px;border:3px #cccccc;border-top-style:solid; border-bottom-style:dotted;"></div>

上面的程式碼將  變成上面實線,下面虛線的區塊 (左右沒有線) 

CSS 樣式顯現結果

p {border-style:solid;}

實線

p {border-style:dashed;}

虛線

p {border-style:double;}

雙線

p {border-style:dotted;}

點線

p {border-style:groove;}

凹線

p {border-style:ridge;}

凸線

p {border-style:inset;}

嵌入線

p {border-style:outset;}

浮出線