一旦網(wǎng)站制作人員為邊框指定一個樣式,下一步就是使用border-width為它指定一個寬度。
border-width
值:[thin | medium | thick|<length>]{1,4}| inherit
初始值:對簡寫屬性未定義
應(yīng)用于:所有元素
繼承性:無
計算值:見各個屬性(border-top-style等)
還可以使用它的某個相關(guān)(單邊)屬性。
border-top-width、border-right-width、border-bottom-width、border-left-width
值:thin | medium | thick |<length>| inherit
初始值:medium
應(yīng)用于:所有元素
繼承性:無
計算值:絕對長度,如果網(wǎng)頁設(shè)計中邊框的樣式為none或hidden,則為0
當(dāng)然,這些屬性用于設(shè)置某個特定邊框邊的寬度,這與單邊外邊距屬性類似。
注意:在網(wǎng)站建設(shè)CSS2.1中,邊框?qū)挾冗€不能指定為百分?jǐn)?shù)值,這確實有待改進。
為邊框指定寬度有4種方法:可以指定一個長度值,如4px或0.1em,或者使用3個關(guān)鍵字之一。這3個關(guān)鍵字分別是thin、medium(默認(rèn)值)和thick。這些關(guān)鍵字不一定對應(yīng)某個特定的寬度,它們只是相對定義。根據(jù)規(guī)范,thick總是比medium寬,而medium則總是比thin寬。
不過,具體的寬度沒有被設(shè)計人員定義,所以一個用戶代理可能將thin、medium和thick分別設(shè)置為等于5px、3px和2px,而另一個用戶代理則分別設(shè)置為3px、2px和1px。不論用戶代理對各個關(guān)鍵字具體使用多大的寬度,不管邊框出現(xiàn)在哪里,各關(guān)鍵字對應(yīng)的寬度在文檔中總保持不變。所以,如果medium等于2px,寬度為medium的邊框總是2像素寬,而不論邊框在h1元素外還是在p元素外。圖8-25展示了處理這3個關(guān)鍵字的一種方法,還顯示了它們彼此之間有何關(guān)系,以及與所包圍的內(nèi)容有何關(guān)系。
假設(shè)一個段落設(shè)置了外邊距,背景顏色以及一個邊框樣式:
p{margin:5px;background-color:silver;border-style:solid;}
默認(rèn)地,邊框的寬度為medium。這很容易改變:
p{margin:5px;background-color:silver;border-scyle:solid;border-width:thick;}
當(dāng)然,邊框?qū)挾瓤梢栽O(shè)置得很極端,如設(shè)置50像素的邊框,如圖8-26所示,
p{margin:5px;background-color:silver;border-style:solid;border-width:50px;}
還可以使用建站人員熟悉的兩種方法為單邊設(shè)置邊框?qū)挾取5谝环N方法是使用本節(jié)開始時提到的某個特定屬性,如border-bottom-width。另一種方法是在border-width中使用值復(fù)制,如圖8-27所示:
h1{border-style:dotted;border-width:thin 0;}
p{border-style:solid;border-width:15px 2px 7px 4px;}
迄今為止,我們只談到了如何使用可見的邊框樣式,如solid或outset。下面考慮在將border-style設(shè)置為none時會出現(xiàn)什么情況:
p{margin:5px;border-style:none;border-width:20px;}
盡管邊框的寬度為20px,但style設(shè)置為none?在這種情況下,不僅邊框的樣式?jīng)]有了,其寬度也會變成0。邊框消失了。為什么呢?
如果你還記得,本章是這樣說的:樣式為none的邊框不存在。這些詞是經(jīng)過仔細斟酌才選定的,因為這有助于解釋到底發(fā)生了什么。由于邊框不存在,所以它不可能有寬度,因此width自動設(shè)置為0,而不論你原先定義的是什么。畢竟,如果一個水杯是空的,你就不能把它描述為裝著半杯“沒有東西”。杯子里確實有內(nèi)容物時才能討論杯子內(nèi)容物的高度。同樣,只有當(dāng)邊框存在時才能討論邊框的寬度。
建立網(wǎng)站時一定記住,這一點很重要,因為忘記聲明邊框樣式是一個常犯的錯誤。這會讓網(wǎng)站建設(shè)人員迷惑不已,因為乍看上去樣式應(yīng)該能正確出現(xiàn)。根據(jù)以下規(guī)則,所有h1元素都不會有任何邊框,更不用說20像素寬了:
h1{border-width:20px;}
由于border-style的默認(rèn)值是none,如果沒有聲明樣式,就相當(dāng)于聲明border-style:none。因此,如果你希望邊框出現(xiàn),就必須聲明一個邊框樣式。
當(dāng)前文章標(biāo)題:網(wǎng)頁設(shè)計中的邊框?qū)挾?/p>
當(dāng)前URL:http://www.gtalker.cn/news/wzzz/Border-width.html