下面我們來看所有邊框屬性中最簡短的簡寫屬性:border.
值:border
[<border-width> || <border-style>||<border-color>] | inherit
初始值:根據單個屬性
應用于:所有元素
繼承性:無
計算值:根據指定確定
這個屬性有一個好處,它相當簡潔,雖然這種簡潔性也帶來一些限制。在討論這些限制之前,先來看border如何工作。如果網站建設人員希望所有hi元素都有一個粗的銀色邊框,這很簡單。以下聲明的結果如圖8-34所示:
h1{border:thick silver solid;}
這些值會應用到所有4個邊。盡管以下做法也不錯,不過上面的聲明更可?。?/p>
h1{border-top:thick silver solid:
border-bottom:thick silver solid;
border-right:thick silver solid;
border-left:thick silver solid;}/*same as previous example*/
使用border的缺點在于,只能定義“全局”的樣式。寬度和顏色。換句話說,為border提供的值將完全相等地應用到所有4個邊。如果網站建設人員希望一個元素有不同的邊框,則需要使用另外的某個邊框屬性。當然,可以充分利用層疊:
H1{border:thick silver solid;
border-left-width:20px;}
第二個規(guī)則會覆蓋第一個規(guī)則為左邊框設置的width值,將寬度替換為20px,如圖8-35所示
與以往一樣,要簡寫屬性仍要特別當心:如果少了一個值,就會自動地填入默認值,這可能會讓網頁設計有意想不到的后果??紤]以下情況:
h4{border-style:dashed solid double;}
h4{border:medium green;}
在此,第二個規(guī)則中沒有指定border-style,這意味著網站建設系統會使用默認值none,這樣一來,所有h4元素都不會有任何邊框。
當前文章標題:網頁設計中的全局邊框
當前URL:http://supportcoffeeroasters.com/news/wzzz/Global-frame.html
上一篇:網頁設計中的簡寫邊框屬性
下一篇:網頁設計中的邊框和行內元素