CSS border-width 元素邊框粗細

CSS border-width 的功能是用來設計元素邊框粗細使用的，也有人說是元素的邊框寬度，常見的圖片邊框粗線、文字加外框或是 DIV 的粗邊框都可以用 border-width 來設計，不過 border-width 無法設定邊框的顏色以及樣式，所以常常與 border-color 以及 border-style 搭配使用，或者直接用 border 設定三個屬性。

CSS border-width 元素邊框粗細語法
border-width:粗細;
語法中的粗細可以只設定單一邊、上下相同以及左右相同、四個邊都不同等模式，看範例就會比較清楚，粗細的單位可以是 px、em、cm、thin（細）、medium（中等）、thick（粗）等。

CSS border-width 範例一、四個邊都是一樣的粗細
<div style="border-color:green;border-style:solid;border-width:3px;padding:5px;">
css border-width 範例
</div>
範例效果
css border-width 範例

css 的 border-width 若只設定一個數字代表四個邊都是用同樣的數字當粗細，為了讓範例效果較為清楚呈現，我們也在 DIV 區塊內加入了 border-color:green 代表綠色的邊框、border-style:solid; 代表粗實線以及 padding 讓邊框內距有 3px 的空間。

CSS border-width 範例二、上下邊框的粗細一樣、左右一樣
<div style="border-color:green;border-style:solid;border-width:3px 6px;padding:5px;">
css border-width 範例
</div>
範例效果
css border-width 範例

範例二的 border-width 共使用了兩個數字，3px 代表上下的邊框粗細，而 6px 則代表左右的粗細。

CSS border-width 範例三、四個邊都是不樣的粗細
<div style="border-color:green;border-style:solid;border-width:3px 6px 9px 12px;padding:5px;">
css border-width 範例
</div>
範例效果
css border-width 範例

範例三就是分別對四個邊設計出不同粗細的常用語法，依序 3px 為上邊框、6px 為右邊框、9px 為下邊框、12px 為左邊框，這樣寫出來的效果就會是四邊不同，請注意，這個順序為 css 的標準規則，不可以改變。

延伸閱讀
© Copyright webtech.tw Since 2010