CSS border 邊框設計 - 網頁設計教學站

CSS border 是邊框設計的標準綜合用法，網頁內的元素如 DIV、span 的邊框都可以透過 border 來設計，那為什麼會說 border 是綜合用法呢？因為 css 可以獨立設定每個邊框的粗細、顏色以及樣式，用到的語法包含 border-width、border-color 以及 border-style，而今天的主角 border 可以一口氣將這幾個項目都設定完成，非常的方便，請看 border 的基本語法以及範例應用。

css border 基本語法

border: width color style;

標準的 border 共有三個可以設定的參數，從最左邊開始的 width 代表邊框寬度（獨立設定使用 border-width）、color 代表邊框顏色（獨立設定使用 border-color）、style 代表邊框樣式（獨立設定使用 border-style），有了這三個參數，就能夠發揮 border 一口氣設定好邊框所有資訊的功用，但缺點是三個參數都不能少，否則會失去效果，請參考兩個範例。

css border 範例一、修改全部邊框的顏色與樣式

<div style="border:3px green solid;">用 border 修改全部邊框的顏色與樣式</div>

以上範例輸出

用 border 修改全部邊框的顏色與樣式

要用 border 設定四個邊框的顏色與樣式其實很簡單，因為 border 預設就是四個邊都一樣，所以像範例這樣的寫法就是代表邊框寬度為 3px、邊框顏色為綠色（green）、邊框樣式為實線（solid），這三個參數分開來設定，則需要分別寫三個語法。

border-width:3px;
border-color:green;
border-style:solid;

無論是要分開寫還是用 border 一次寫完都可以，看當時設計的情況而定，再來考慮一個情況，就是我們要四個邊都用不同的顏色或樣式的話，又該怎麼設計呢？這個問題也很簡單，請看範例二。

css boder 範例二、修改單邊的邊框顏色與樣式

<div style="border-left:3px green solid;">用 border 修改單邊的邊框顏色與樣式</div>

以上範例輸出

用 border 修改單邊的邊框顏色與樣式

範例二的 css 語法與範例一僅有一個地方不同，就是範例一的 border 改成 border-left，這樣代表我們僅需設定左邊框，透過這樣的方式，我們還可以獨立設定上邊框、右邊框以及下邊框，只要將 border 語法梢做修改，四個邊的 border 寫法是這樣。

border-left 代表左邊框
border-top 代表上邊框
border-bottom 代表下邊框
border-right 代表右邊框

有了這樣的基本慨念，無論是要設計出四個邊框都一樣的元素或是每個邊框都不一樣的效果都很容易，另外，本篇所介紹的兩個範例都是以 DIV 為參考，有興趣的朋友可以自己設計 span 或圖片邊框做練習。

如果你想找更多美觀的邊框樣式設計，例如虛線邊框、雙實線邊框、點線邊框、無邊框 ... 等視覺效果，可以參閱《CSS border-style 邊框樣式設計》篇的詳細內容。

延伸閱讀