網(wǎng)站建設CSS規范清楚地指出元素的背景會(huì )延伸到邊框邊界之外，因為規范中提到，邊框繪制在“元素的背景之上”。這很重要，因為有些邊框是“間斷的”（例如，點(diǎn)線(xiàn)邊框或虛線(xiàn)框），元素的背景應當出現在邊框的可見(jiàn)部分之間。

發(fā)布CSS2時(shí)，它指出背景只延伸到內邊距，而不是邊框。后來(lái)又對此做了更正，CSS2.1明確指出元素的背景是內容、內邊距和邊框區的背景。大多數瀏覽器都遵循CSS2.1定義，不過(guò)網(wǎng)站建設人員發(fā)現一些較老的瀏覽器可能會(huì )有不同的表現。背景顏色問(wèn)題將在第9章更詳細地討論。

有樣式的邊框

先來(lái)討論邊框樣式，這是邊框最重要的一個(gè)方面，并不只是因為樣式控制著(zhù)邊框的顯示（當然，樣式確實(shí)控制著(zhù)邊框的顯示），而是因為如果沒(méi)有樣式，將根本沒(méi)有邊框。

CSS為屬性border-style定義了10個(gè)不同的非inherit網(wǎng)頁(yè)設計樣式，包括默認值none。

樣式值hidden等價(jià)于none，不過(guò)應用于表時(shí)除外，對于表，hidden用于解決邊框沖突（更多詳細信息見(jiàn)第11章）。

border-style

值：[none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset]{1,4}| inherit

初始值：對簡(jiǎn)寫(xiě)屬性沒(méi)有定義

應用于：所有元素

繼承性：無(wú)

計算值：見(jiàn)各個(gè)屬性（border-top-style等）

說(shuō)明：根據CSS1和CSS2,HTML用戶(hù)代理只需支持solid和none丨其余的值（除hidden外）可能被解釋為solid，這個(gè)限制在CSS2.1中被去除

最不可預測的邊框樣式是double，它定義為兩條線(xiàn)的寬度再加上這兩條線(xiàn)之間的空間等于border-width值（這將在下一節討論）。不過(guò)，CSS規范并沒(méi)有說(shuō)其中一條線(xiàn)是否比另一條線(xiàn)粗，或者兩條線(xiàn)是否應該一樣粗，也沒(méi)有指出線(xiàn)之間的空間是否應當比線(xiàn)粗。所有這些都由用戶(hù)代理決定，網(wǎng)站建設人員對這個(gè)決定沒(méi)有任何影響，所有邊框color值都是gray，這就能更容易地看出視覺(jué)效果。邊框樣式的外觀(guān)總是以某種方式基于邊框的顏色，雖然具體的方式可能隨用戶(hù)代理的不同而有所不同。

假設你想為包含在未訪(fǎng)問(wèn)超鏈按內部的圖像定義一個(gè)邊框樣式?？梢詫⑦吙蛟O置為outset，使之看上去像是“凸起按鈕”，如圖8-22所示：

a:link img{border-style:outset;}

同樣地，邊框的顏色要基于元素的color值。在這個(gè)例子中，這個(gè)值很可能是blue（不過(guò)在本書(shū)上顯示不出來(lái)），因為圖像包含在一個(gè)超鏈接中，而超鏈接的前景色通常是blue。如果需要，可以把color改為silver，如下：

a:link img{border-style:outset;color:silver.;}

邊框現在將基于一種淡灰的silver，因為這是圖像現在的前景色，盡管圖像并沒(méi)有使用這個(gè)前景色，但它還是會(huì )傳遞到邊框。本章后面還會(huì )介紹另外一種改變邊框顏色的方法。

多種樣式

可以為給定邊框定義多個(gè)樣式，例如：

p.aside{border-style:solid dashed dotted solid;}

其結果是段落有一個(gè)實(shí)線(xiàn)上邊框。虛線(xiàn)右邊框、點(diǎn)線(xiàn)下邊框和一個(gè)實(shí)線(xiàn)左邊框。

我們又看到了這里的值采用了top-right-bottom-left的順序，討論用多個(gè)值設置不同外邊距時(shí)也見(jiàn)過(guò)這個(gè)順序。關(guān)干外邊距和內邊距值復制的規則同樣適用于邊框樣式。因此，以下兩個(gè)規則應該有相同的效果，如圖8-23所示：

p.newl{border-style:solid dashed none;}

p.new2{border-style:solid dashed none dashed;}

有時(shí)網(wǎng)頁(yè)設計人員可能只想為元素框的一邊設置邊框樣式，而不是設置所有4個(gè)邊的邊框樣式。這就要用到單邊邊框樣式屬性了。

border-top-style、border-right-style、border-bottom-style、border-left-style

值：none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit

初始值：none

應用于：所有元素

繼承性：無(wú)

計算值：根據指定確定

單邊邊框樣式屬性的含義不言自明。例如，如果你想改變下邊框的樣式，可以使用border-bottom-style。

border與單邊屬性結合使用的情況很常見(jiàn)。假設你想在一個(gè)標題的三個(gè)邊上設置實(shí)線(xiàn)邊框，但是沒(méi)有左邊框，如圖8-24所示。

為此有兩種等價(jià)的方法：

h1{border-style:solid solid solid none;}

/*the method above is the same as the one below*/

h1{border-style:solid;border-left-style:none;}

要記住重要的一點(diǎn)，如果網(wǎng)頁(yè)設計中要使用第二種方法，必須把單邊屬性放在簡(jiǎn)寫(xiě)屬性之后，對于簡(jiǎn)寫(xiě)屬性通常都是這樣。這是因為如果聲明border-style:solid，實(shí)際上是在聲明border-style:solid solid solid sdlid。倘若把border-style-left:none放在border-style聲明之前，簡(jiǎn)寫(xiě)屬性的值就會(huì )覆蓋單邊值none。

到目前為止，你可能已經(jīng)注意到，邊框例子使用的都是相同寬度的邊框。這是因為你沒(méi)有定義width，所以它默認為某個(gè)值。接下來(lái)，我們將介紹這個(gè)默認值以及更多內容。