CSS border-style 邊框樣式

CSS 中透過 border-style 設定邊框的樣式,可以一次設定四個邊框,也可以分別設定各個邊框樣式,網頁中的許多元素,特別是 DIV 區塊以及 span 區域的邊框樣式,都可以使用 border-style 來設計,border-style 要能正確顯示,通常會同時包含 border-width(邊框寬度)以及 border-color(邊框顏色)的搭配,幾乎所有的主流瀏覽器都支援 CSS border-style 的邊框樣式屬性。

CSS border-style 設定語法
描述語法
設定四個邊框樣式border-style: 樣式;
僅設定上邊框樣式border-top-style: 樣式;
僅設定右邊框樣式border-right-style: 樣式;
僅設定下邊框樣式border-bottom-style: 樣式;
僅設定左邊框樣式border-left-style: 樣式;

CSS border-style 範例
<div style="border-width:3px;border-style:dashed;border-color:#FFAC55;padding:5px;">
測試邊框樣式
</div>
以上範例輸出結果如
測試邊框樣式
範例中「border-style:dashed」這樣的寫法代表四個邊框的樣式都是虛線(dashed),另外我們還使用了 border-width 來設定邊框的粗細、border-color 設定邊框的顏色,以及 padding 設定文字與邊框間的內距。以下準備了常用到的幾種 border-style 給您參考。

備註、挑選邊框顏色請使用:色碼表

常用 CSS border-style 樣式表
border-style:solid;
border-style:dotted;
border-style:dashed;
border-style:double;
border-style:outset;
border-style:groove;
border-style:ridge;
border-style:inset;
border-style:none;
最後一個「border-style:none」這樣的寫法,意思是不顯示邊框,效果等同於「border-style:hidden」,不過在大部分的情況下,無論是 DIV 區塊或 span 區域,若未繼承自父層的樣式,預設都是沒有顯示邊框。僅管所有主流的瀏覽器都支援 border-style 的屬性,但以上範例在各瀏覽器中呈現效果可能還是有些許差異,使用前建議多用幾個瀏覽器測試看看。

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012 Englsih version
PHP Smarty MySQL JQuery Apache W3C