遺憾的是,簡寫屬性(如border-color和border-style)并不總像你想得那么有用。
例如,網(wǎng)站建設(shè)人員可能想在所有h1元素上應(yīng)用一個粗的灰色實線邊框,不過只是底邊上有此邊框。如果只使用我們目前已經(jīng)討論過的屬性,應(yīng)用這樣一個邊框時會遇到很大困難。以下是兩個例子:
h1{border-bottom-width:thick;/*option#1*/
border-bottom-style:solid;
border-bottom-color:gray;}
h1{border-width:0 0 thick;/*option#2*/
border-style:none none solid;
border-color:gray;}
根據(jù)以上鍵入的規(guī)則,這兩種做法都很不方便。幸運的是,還有一種更好的解決方法:
h1{border-bottom:thick solid gray;}
這只是向底邊邊框應(yīng)用值,而所有其他邊的邊框仍為其默認值。由于默認的邊框樣式為none,所以元素其他三個邊上不出現(xiàn)邊框。
網(wǎng)頁設(shè)計,總共有4個這樣的簡寫屬性。
border-top、border-right、border-bottom、border-left
值:[<border-width>||<border-style>||<border-color>]|inherit
初始值:對簡寫屬性未定義
應(yīng)用于:所有元素
繼承性:無
計算值:見單個屬性(border-width等)
可以使用這些屬性創(chuàng)建一些復(fù)雜的邊框:
h1{border-left:3px solid gray;
border-right:black 0.25em dotted;
border-top:thick silver inset;
border-bottom:double rgb(33%,33%,33%)10px;)
可以看到,具體值的順序并不重要。以下三個規(guī)則會得到完全相同的邊框效果:
h1{border-bottom:3px solid gray;}
h2{border-bottom:solid gray 3px;}
h3{border-bottom:3px gray solid;}
還可以省略一些值,使用其默認值,如下:
h3{color:gray;border-bottom:3px solid;}
由于沒有聲明任何邊框顏色,因此會應(yīng)用默認值(元素的前最色)。要記住,如果沒有邊框樣式,默認樣式值none會使得邊框不復(fù)存在。
相反,如果只設(shè)置了樣式,還是會得到一個邊框。假設(shè)網(wǎng)站設(shè)計者只想有一個樣式為dashed的上邊框,而且希望其寬度仍為默認值medium,顏色與元素本身的文本顏色相同,在這種情況下,所需的就是以下標記(見圖8-33):
p.roof{border-top:dashed;}另一個要注意的是,由于這些“單邊邊框”屬性只應(yīng)用到一個特定的邊,所以不可能進行值復(fù)制——這是沒有任何意義的,每種值只能有一個:也就是說,只能有一個寬度值、一個顏色值和一個邊框樣式。所以網(wǎng)頁設(shè)計不要為同一個類型聲明多個值:
h3{border-top:thin thick solid purple;}/*cwo width values——WRONG*/
在這種情況下,整個語句都將無效,用戶代理會將其全部忽略。
當(dāng)前文章標題:網(wǎng)頁設(shè)計中的簡寫邊框?qū)傩?/p>
當(dāng)前URL:http://www.gtalker.cn/news/wzzz/Border-attribute.html