CSS 語法 邊框設定

在部落格中 ，不管是標題、文章、公告、選單 、導航都是一個一個框(格) 所包住~
只是CSS語法讓那個框顯示、隱藏；框的線條是實線、虛線、點線...

「border」是指邊框樣式   在CSS 寫成
這是比較正式的寫法
border-style:solid;     
border-width:3;
border-color:Green;
簡化的寫法 ( 2gril 是簡化的寫法 )
border:3px double #FFCC66；

設定框線粗細(寬度)

上下左右的框線  預設值為中等(medium) 、細(thin)、 (thick)等
border-top-width       上方框線寬度
border-right-width     右方框線寬度
border-bottom-width    下方框線寬度
border-left-width      左方框線寬度
可以簡化成  
{border-width: 1px 2px 3px 4px;}
後方的數字 是指 上 右 下 左 (順時針方向) 要空一格唷!

設定框線樣式

border-top-style        上方框線樣式
border-right-style      右方框線樣式
border-bottom-style     下方框線樣式
border-left-style       左方框線樣式
可以簡化成 {border-style: dotted dashed solid double;}
一樣是 上 右 下 左 (順時針方向) 要空一格唷!
預設值為無(none)。
其他屬性包括隱藏(hidden)、點狀線(dotted)、虛線(dashed)、實線(solid)、雙線(double)、
凹陷(groove)、凸起(ridge)、嵌入(inset)，以及鑲出(outset)等。

設定框線顏色

border-top-color      上方框線顏色
border-right-color    右方框線顏色
border-bottom-color   下方框線顏色
border-left-color     左方框線顏色
可以簡化成  {border-color: red yellow orange black;}
一樣是 上 右 下 左 (順時針方向) 要空一格唷!

設定某一個框線的粗細、樣式、顏色

{border-top: 1px dotted red;}        上方框線
{border-right: 2px dashed yellow;}   右方框線
{border-bottom: 3px solid orange;}   下方框線
{border-left: 4px double black;}     左方框線

這樣大家有沒有比較瞭解了^0^
himari 也是學到很多唷!