大家好！最近剛好有利用到CSS設定邊框，在此就跟大家分享這個部份Embarassed

邊框屬性如下：　

border-style/*邊框樣式*/

border-width/*邊框寛度*/

border-color/*邊框顏色*/

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

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

 

border-style 設定邊框樣式，以下為不同屬性的顯現結果及設定的值。由於border-style 的預設值是none，如果沒有聲明樣式，就相當於border-style: none。因此，如果希望邊框出現，就必須聲明一個邊框樣式。

實線框　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;}

 

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

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

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

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

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

 

border-color 設定邊框的顏色。

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

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

 

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

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

 

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

上　p {border-top-style:solid;}

左　p {border-left:3px dotted;}

下　p {border-bottom:#0000ff double;}

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

 

謝謝大家對捲捲米花的支持Smile，希望這篇文章對大家有幫助。