網(wǎng)站建設(shè)CSS規(guī)范清楚地指出元素的背景會延伸到邊框邊界之外，因?yàn)橐?guī)范中提到，邊框繪制在“元素的背景之上”。這很重要，因?yàn)橛行┻吙蚴恰伴g斷的”（例如，點(diǎn)線邊框或虛線框），元素的背景應(yīng)當(dāng)出現(xiàn)在邊框的可見部分之間。

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

有樣式的邊框

先來討論邊框樣式，這是邊框最重要的一個(gè)方面，并不只是因?yàn)闃邮娇刂浦吙虻娘@示（當(dāng)然，樣式確實(shí)控制著邊框的顯示），而是因?yàn)槿绻麤]有樣式，將根本沒有邊框。

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

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

border-style

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

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

應(yīng)用于：所有元素

繼承性：無

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

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

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

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

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

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

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

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

多種樣式

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

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

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

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

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

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

有時(shí)網(wǎng)頁設(shè)計(jì)人員可能只想為元素框的一邊設(shè)置邊框樣式，而不是設(shè)置所有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

應(yīng)用于：所有元素

繼承性：無

計(jì)算值：根據(jù)指定確定

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

border與單邊屬性結(jié)合使用的情況很常見。假設(shè)你想在一個(gè)標(biāo)題的三個(gè)邊上設(shè)置實(shí)線邊框，但是沒有左邊框，如圖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)頁設(shè)計(jì)中要使用第二種方法，必須把單邊屬性放在簡寫屬性之后，對于簡寫屬性通常都是這樣。這是因?yàn)槿绻暶鱞order-style:solid，實(shí)際上是在聲明border-style:solid solid solid sdlid。倘若把border-style-left:none放在border-style聲明之前，簡寫屬性的值就會覆蓋單邊值none。

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