CSS border-style 邊框樣式設計

CSS border-style 的功用是用來設計網頁元素邊框的樣式之用,例如實線、虛線、點線 ... 等特殊樣式,都可以用 border-style 來設計,不過光是用 border-style 還無法清楚的呈現元素邊框的樣式,必須再搭配上邊框顏色(border-color)以及邊框粗細(border-width)才能完整呈現效果,border-style 適用於 DIV 區塊、span 區域、圖片、Table 表格 ... 等元素。

CSS border-style 邊框樣式語法
border-style: 邊框樣式 ;
常用的 border-style 有實線(solid)、點線(dotted)、虛線(dashed)、雙實線(double)、無實線(none)等樣式,另外還有一些比較立體的感覺,例如 outset、groove、ridge、inset 等,可以自己嘗試看看效果如何,另外,css border-style 跟 border-color 以及 border-width 同樣都可以對四個邊獨立設計,而且有替代寫法。

CSS border-style 範例一、四個邊框樣式都一樣
<div style="border-width:3px;border-style:dashed;border-color:pink;padding:4px;">
四個邊框樣式都一樣
</div>
呈現結果
測試邊框樣式

範例一的 border-style 只用了一個樣式 dashed 代表虛線,所以四個邊框樣式都是 dashed。

CSS border-style 範例二、上下邊框樣式一樣、左右邊框樣式一樣
<div style="border-width:3px;border-style:dashed double;border-color:pink;padding:4px;">
上下邊框樣式一樣、左右邊框樣式一樣
</div>
呈現結果
上下邊框樣式一樣、左右邊框樣式一樣

範例二的 border-style 多出了 double 雙實線的樣式,這樣寫代表上下邊框樣式均為虛線 dashed,而左右邊框樣式均為雙實線 double,此順序是 css 基本規則,不可以改變。

CSS border-style 範例三、四個邊框的樣式都不一樣
<div style="border-width:3px;border-style:dashed double solid outset;border-color:pink;padding:4px;">
四個邊框的樣式都不一樣
</div>
呈現結果
四個邊框的樣式都不一樣

範例三的 border-style 共採用了四個樣式,分別代表上邊框 style 為虛線 dashed、右邊框 style 為雙實線 double、下邊框為實線 solid 以及左邊框為較為立體的 outset,四個邊框不同的樣式,設計順序不可以改變。

延伸閱讀
© Copyright webtech.tw Since 2010