css border-style 邊框樣式

css border-style 是邊框樣式設計的標準語法,意思是就是用來設計網頁元素邊框用的語法,讓元素邊框變得更加優美(事情沒有絕對,這要看設計師的功力 ...),有哪些網頁元素可以使用 border-style 呢?其實舉凡表格、DIV 區塊、span 區域、圖片邊框都可以使用,那又有哪些邊框的樣式可以使用呢?坦白說還蠻多的,例如虛線、實線、點線、雙實線或者是完全不要顯示邊框都可以唷!css border-style 的語法規則也很簡單。

css border-style 邊框樣式設計語法規則
border-style: 樣式參數;
我們常用到的樣式參數寫法有下面這幾種,參考看看吧!
  • border-style:solid; //實線
  • border-style:dotted; //點線
  • border-style:dashed; //虛線
  • border-style:double; //雙實線
  • border-style:outset; //立體
  • border-style:inset; //立體
  • border-style:groove; //立體
  • border-style:ridge; //立體
  • border-style:none; //不顯示框線
以上有幾個立體的效果可能很難用中文字形容,請看 Wibibi 的範例:border-style

css border-style 邊框樣式設計範例
效果會像這樣子
嘗試看看綠色的虛線邊框效果
其他的效果請自己試試看,只要更換範例中 border-style 的參數就可以了,其他的語法如 border-width 是用來控制邊框粗細用的,border-color 則是用來控制邊框顏色用的,最後的 padding 只是用來調整文字與邊框間的距離而已,與 border 設計沒有關係。若您想更進一步的認識 css 對於邊框的設計語言,這幾篇都很詳細。
要構成一個元素邊框必須有幾個條件,首先是邊框的粗細,接著是顏色以及樣式,從範例中我們就可以看到這三種屬性的寫法,不過這樣寫其實有一點麻煩,css 的設計師當然沒這麼笨,早就想到了更便利的方式,直接使用一個 border 就可以將三種屬性寫在一起。

關於一個 border 寫完的方式請直接看《CSS border 元素邊框設計》這篇的說明。
分享於 2014-08-26