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