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

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

有樣式的邊框

先來討論邊框樣式，這是邊框最重要的一個方面，并不只是因為樣式控制著邊框的顯示（當然，樣式確實控制著邊框的顯示），而是因為如果沒有樣式，將根本沒有邊框。

CSS為屬性border-style定義了10個不同的非inherit網頁設計樣式，包括默認值none。

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

border-style

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

初始值：對簡寫屬性沒有定義

應用于：所有元素

繼承性：無

計算值：見各個屬性（border-top-style等）

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

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

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

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

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

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

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

多種樣式

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

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

其結果是段落有一個實線上邊框。虛線右邊框、點線下邊框和一個實線左邊框。

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

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

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

有時網頁設計人員可能只想為元素框的一邊設置邊框樣式，而不是設置所有4個邊的邊框樣式。這就要用到單邊邊框樣式屬性了。

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

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

初始值：none

應用于：所有元素

繼承性：無

計算值：根據指定確定

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

border與單邊屬性結合使用的情況很常見。假設你想在一個標題的三個邊上設置實線邊框，但是沒有左邊框，如圖8-24所示。

為此有兩種等價的方法：

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;}

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

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