在 CSS 中常見的邊框 (border) 屬性有以下幾種：
border-style
border-width
border-color
border-top-, border-left-, border-bottom-, border-right-
border
border-style
border-style 屬性指定邊框的樣式。以下的表格列出這個屬性可能有的值，以及每一個值顯現出來的結果。
| CSS 樣式 | 顯現結果 |
|
p {border-style:solid;}
| 實線
|
|
p {border-style:dashed;}
|
虛線
|
|
p {border-style:double;}
|
雙線
|
|
p {border-style:dotted;}
|
點線
|
|
p {border-style:groove;}
|
凹線
|
|
p {border-style:ridge;}
|
凸線
|
|
p {border-style:inset;}
|
嵌入線
|
|
p {border-style:outset;}
|
浮出線
|
border-width
border-width 屬性是用來設定邊框的寬度。可用的值為 thin (薄)、medium (中等)、thick (厚)，或是一個數字。
| CSS 樣式 | 顯現結果 |
|
p {border-width:9px; border-style:solid;}
| 邊框寬度為 9px
|
|
p {border-width:medium; border-style:dashed;}
|
邊框寬度為中等 |
border-color
border-color 屬性是用來設定邊寬的顏色。
舉例如下：
| CSS 樣式 | 顯現結果 |
|
p {border-color:#0000FF; border-style:solid;}
| 藍色邊框
|
|
p {border-color:red; border-style:dotted;}
|
紅色邊框
|
border-top-, border-left-, border-bottom-, border-right-
我們可以將方向 (top - 上、bottom - 下、left - 左、right - 右) 和樣式、寬度、及顏色合起來而成為一個屬性。舉例來說，
border-top-style 屬性就是用來設定上邊框的樣式。
以下舉幾個例子：
| CSS 樣式 | 顯現結果 |
|
p {border-top-style:solid; border-bottom-style:dotted;}
| 例1：上邊框為實線，下邊框為點線
|
|
p {border-top-style:solid; border-top-width:medium;}
| 例 2：上邊框為實線，且寬度中等
|
|
p {border-left-style:solid; border-bottom-style:dashed;
border-bottom-color:#00FF00;}
| 例3：左邊框為實線，下邊框為虛線，且顏色為綠色
|
border
若四邊的邊框屬性都一樣，那我們可以用一個 border 屬性來描述，而不必四個邊都描述一次。另外，我們可以在同一行一次宣告邊框樣式、邊框寬度、以及邊框顏色。
舉例來說，若我們有以下的 CSS 碼，
|
p {
border:#0000FF 5px solid;
}
|
那以下的 HTML，
會顯現出
用一行來宣佈所有邊框的屬性
下一頁： CSS 留白
Copyright 1keydata.com 2007, 2008, All Rights Reserved.
|
|