網(wǎng)頁設(shè)計(jì)中的邊框背景

網(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)容。

網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷咨詢專線:0871-63535511(點(diǎn)擊可一鍵撥號)