第十一課：包邊（Borders）

Borders的用途很廣泛，如裝飾元素或強調兩樣東西的間隔等。CSS給你在網頁中使用Borders提供了無限選擇。

border-width
border-color
border-style
border

包邊寬度[border-width]

包邊的寬度是用特性border-width定義的，可以獲得薄，中和厚，或用pixels標示的數字值。下面是關于這一系統的實例：

包邊顏色[border-color]

特性border-color定義了包邊的顏色。值是正常的顏色值，即 “#123456″，”rgb(123,123,123)” 或”yellow” 。

包邊的類型[border-style]

包邊有很多類型可選，下面展示IE瀏覽器解釋的其中8種。所有實例都是金色，并且采用厚度“thick”，但實際上也可以用其它顏色和厚度顯示。如果不需要包邊，可以用none或hidden值。

定義包邊的實例

上文提到的三個特性可以放在一起用于每個元素，并產生不同的包邊。下面讓我們通過舉例說明一個定義 <h1>, <h2>, <ul> 和 <p>的文檔。雖然顯示結果不是很好看，但能說明一些可能性。

h1 {
border-width: thick;
border-style: dotted;
border-color: gold;
}

h2 {
border-width: 20px;
border-style: outset;
border-color: red;
}

p {
border-width: 1px;
border-style: dashed;
border-color: blue;
}

ul {
border-width: thin;
border-style: solid;
border-color: orange;
}

還可以聲明top-, bottom-, right-或left包邊的特點。下面實例將告訴你怎樣做：

h1 {
border-top-width: thick;
border-top-style: solid;
border-top-color: red;

border-bottom-width: thick;
border-bottom-style: solid;
border-bottom-color: blue;

border-right-width: thick;
border-right-style: solid;
border-right-color: green;

border-left-width: thick;
border-left-style: solid;
border-left-color: orange;
}

匯編[border]

在有許多特性的情況下，可以用border將許多特性匯編在一起。請看實例：

p {
border-width: 1px;
border-style: solid;
border-color: blue;
}

可以將其匯編為：

p {
border: 1px solid blue;
}

總結

這一課學習了用CSS給網頁添加包邊的無限選擇。下一課，我們將學習如何給箱型定義高和寬的尺寸。