CSS border-width 邊框寬度

CSS border-width 用來設定邊框的寬度,也可以說是設定邊框的粗細,網頁元素的邊框粗細都可以使用 border-width 來設定,例如 DIV 區塊以及 span 區域的邊框寬度,都可以使用 border-width 來設定,另外,border-width 通常會與 border-style(邊框樣式)以及 border-color(邊框顏色)一起使用,來呈現一個完整個邊框視覺設計,所有的主流瀏覽器都支援 css border-width 的屬性語法。

CSS border-width 基本語法
描述語法
一次設定四個邊框的寬度border-width: 寬度;
分別設定四的邊框的寬度border-width: 上邊框寬度 右邊框寬度 下邊框寬度 左邊框寬度;
分別設定上下邊框以及左右邊框border-width: 上下邊框寬度 左右邊框寬度;

CSS border-width 常用單位如 px、em、cm、thin(細)、medium(中等)、thick(粗)等。

CSS border-width 範例一、四個邊的寬度都一樣
<div style="border-color:#aaaaee;border-style:solid;border-width:3px;padding:5px;">
測試邊框寬度效果
</div>
以上範例輸出結果如
測試邊框寬度效果
範例中使用了 border-width:3px 這樣的寫法,代表四個邊框的寬度都一樣為 3px,同時還用了 border-styleborder-color 等語法,用來呈現完整的邊框風格呈現效果,這幾個屬性缺一不可,除非使用 border 的完整寫法,才能一次包含所有屬性。

CSS border-width 範例二、獨立設定四個邊的寬度
<div style="border-color:#aaaaee;border-style:solid;border-width:3px 6px 9px 12px;padding:5px;">
測試邊框寬度效果
</div>
以上範例輸出結果如
測試邊框寬度效果
請注意,若要設定四個邊框不同的寬度,必須依序寫上、右、下、左的寬度,這是 CSS 規定的標準順序,以範例中「border-width:3px 6px 9px 12px;」這樣的寫法,代表上邊框寬度 3px、右邊框寬度 6px;、下邊框寬度 9px、左邊框寬度 12px。

CSS border-width 範例三、上下邊寬的寬度相同以及左右邊框寬度相同
<div style="border-color:#aaaaee;border-style:solid;border-width:3px 6px;padding:5px;">
測試邊框寬度效果
</div>
以上範例輸出結果如
測試邊框寬度效果
範例中「border-width:3px 6px;」這樣的寫法,代表上下邊框寬度都是 3px,而左右邊框寬度都是 6px。CSS border-width 的三種不同寫法,提供設計師相當靈活的設計方式,這三種寫法其實在運作效能方面並沒有太大的差異,純粹讓設計師寫起來比較方便而以,但通常四個邊都設定一樣的寬度時,都只採用第一種最簡單的寫法,這樣在未來管理上,會比較有效率一些。

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012