[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;}

 

浮出線

 

文章標籤
創作者介紹
創作者 咪咪醬 的頭像
咪咪醬

咪咪醬‧阿財肥貓俱樂部

咪咪醬 發表在 痞客邦 留言(0) 人氣()