CSS邊框屬性如下: 

border-style/*邊框樣式*/

border-width/*邊框寛度*/

border-color/*邊框顏色*/

border-top, border-left, border-bottom, border-right/*可直接針對上、左、下、右設定邊框屬性*/

border/*所有邊框的屬性*/

 border-style 設定邊框樣式,以下為不同屬性的顯現結果及設定的值。

實線框
 {border-style:solid;}

虛線框 {border-style:dashed;}

雙線框 {border-style:double;}

點線框 {border-style:dotted;}

立體內凹線框 {border-style:groove;}

立體內凸線框 {border-style:ridge;}

凹線框 {border-style:inset;}

凸線框 {border-style:outset;}

border-width 設定邊框寬度,可用的值為是一個數字,或是一個單字thin (薄)、medium (中等)、thick (厚)。

6px寬 {border-style: solid; border-width: 6px;}

 {border-style: solid; border-width: thin;}

   {border-style: solid; border-width: medium;}

{border-style: solid; border-width: thick;}

 border-color 設定邊框的顏色。

紅邊框 {border-style:dotted; border-color:#ff0000;}

綠邊框 {border-style:dotted; border-color:#00ff00;}

border 可以在同一行一次宣告四個邊的邊框顏色、邊框寬度、以及邊框樣式。

記得用空白隔開 {border:#0000ff 6px double;}

border-top, border-left, border-bottom, border-right
分別設定四個邊的屬性 top (上) 、bottom (下)、left( 左) 、right( 右) 。

 {border-top-style:solid;}

 {border-left:3px dotted;}

 {border-bottom:#0000ff double;}

 {border-right:#ff0000 1px dashed;}

 

rs5257 發表在 痞客邦 PIXNET 留言(0) 人氣()