CSS border 邊框

border 顧名思義就是邊框的意思,在 CSS 中,你可以透過 border 的語法來對邊框做許多樣化的設計變化,例如設定邊框的寬度、樣式、顏色等等,也可以隱藏邊框,原則上 CSS 對於 border 的設計不只局限於 DIV 區塊或 span 的邊框,也可以應用到其他的網頁元素的邊框上,例如網頁標題的邊框、圖片的邊框(img border)... 等,所有的主流瀏覽器都支援 CSS border 屬性。

CSS border 語法介紹

border: 邊框粗細 邊框顏色 邊框樣式 ;


標準的 css border 規則由左至右共有三個參數,每個參數間用半形空格隔開,第一個參數為邊框的粗細(border-width),一般使用 px、em 等標準網頁單位,第二個參數標示邊框的顏色(border-color),可以使用色標準色碼或顏色的英文名稱,第三個參數是邊框樣式(border-style),可以設定實線、虛線、雙實線、連續點 ... 等許多不同的風格。

CSS border 語法範例一、直接替 DIV 區塊加上邊框
<div style="border:5px #FFAC55 solid;">
這是邊框測試
</div>
在這個範例中,我們設定 <div> 區塊的邊框寬度是 5px,邊框顏色是淡橘色(#FFAC55)、邊框樣式是實線(solid),呈現效果如下
這是邊框測試
在此範例中 border 的寬度與顏色比較沒什麼需要特別說明,依照你的喜愛自己設定即可,除了將邊框的寬度、顏色與 style 寫在一起之外,其實也可以獨立出來寫,例如 border-width(邊框寬度)、border-color(邊框顏色)以及 border-style(邊框款式)。另外,border 可以分別為四個邊做不同的設計,四個方位的表示法:上方為 border-top、右方為 border-right、下方為 border-bottom、左方為 border-left。

CSS border 範例二、獨立替四個邊做設計
<style type="text/css">
#BorderBox{
 border-top:5px black solid; //上方邊框寬度設為 5px,顏色為黑色
 border-right:8px red double; //右邊的邊框寬度設為 8px,顏色為紅色,樣式為 double
 border-left:7px yellow dotted; //左邊的邊框寬度設為 7px,顏色為黃色,樣式為 dotted
 border-bottom:3px blue dashed; //下方邊框寬度設為 3px,顏色為藍色,樣式為 dashed
 padding:30px;
}
</style>
<div id="BorderBox">四個不同的邊框設計</div>
以上範例輸出結果如
四個不同的邊框設計
每個方向邊框用不同的顏色或風格設計也是設計師常用的一種手法,很容易拼湊出不同的冰紛色彩風格,但還是要與整個網頁風格做搭配才比較好。若你不需要單獨替每個邊做設計,那使用範例一的整合式寫法,一次管理所有的邊框,會比較有效率。

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

CSS3 提供更強大的網頁元素邊框設計功能,請參閱:CSS3 邊框設計

相關主題延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 2012~2016 Englsih version聯絡我們
PHP Smarty MySQL JQuery Apache W3C