網(wǎng)頁(yè)設計中的簡(jiǎn)寫(xiě)邊框屬性

  • 2018-12-17 17:39:57
  • 閱讀次數:次
  • 作者:盈嵐科技小編
  • 來(lái)源:http://amzcoolest.com

遺憾的是,簡(jiǎn)寫(xiě)屬性(如border-color和border-style)并不總像你想得那么有用。

例如,網(wǎng)站建設人員可能想在所有h1元素上應用一個(gè)粗的灰色實(shí)線(xiàn)邊框,不過(guò)只是底邊上有此邊框。如果只使用我們目前已經(jīng)討論過(guò)的屬性,應用這樣一個(gè)邊框時(shí)會(huì )遇到很大困難。以下是兩個(gè)例子:

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;}

根據以上鍵入的規則,這兩種做法都很不方便。幸運的是,還有一種更好的解決方法:

h1{border-bottom:thick solid gray;}

這只是向底邊邊框應用值,而所有其他邊的邊框仍為其默認值。由于默認的邊框樣式為none,所以元素其他三個(gè)邊上不出現邊框。

網(wǎng)頁(yè)設計,總共有4個(gè)這樣的簡(jiǎn)寫(xiě)屬性。

border-top、border-right、border-bottom、border-left

值:[<border-width>||<border-style>||<border-color>]|inherit

初始值:對簡(jiǎn)寫(xiě)屬性未定義

應用于:所有元素

繼承性:無(wú)

計算值:見(jiàn)單個(gè)屬性(border-width等)

可以使用這些屬性創(chuàng )建一些復雜的邊框:

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;)

可以看到,具體值的順序并不重要。以下三個(gè)規則會(huì )得到完全相同的邊框效果:

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;}

由于沒(méi)有聲明任何邊框顏色,因此會(huì )應用默認值(元素的前最色)。要記住,如果沒(méi)有邊框樣式,默認樣式值none會(huì )使得邊框不復存在。

相反,如果只設置了樣式,還是會(huì )得到一個(gè)邊框。假設網(wǎng)站設計者只想有一個(gè)樣式為dashed的上邊框,而且希望其寬度仍為默認值medium,顏色與元素本身的文本顏色相同,在這種情況下,所需的就是以下標記(見(jiàn)圖8-33):

p.roof{border-top:dashed;}另一個(gè)要注意的是,由于這些“單邊邊框”屬性只應用到一個(gè)特定的邊,所以不可能進(jìn)行值復制——這是沒(méi)有任何意義的,每種值只能有一個(gè):也就是說(shuō),只能有一個(gè)寬度值、一個(gè)顏色值和一個(gè)邊框樣式。所以網(wǎng)頁(yè)設計不要為同一個(gè)類(lèi)型聲明多個(gè)值:

h3{border-top:thin thick solid purple;}/*cwo width values——WRONG*/

在這種情況下,整個(gè)語(yǔ)句都將無(wú)效,用戶(hù)代理會(huì )將其全部忽略。

當前文章標題:網(wǎng)頁(yè)設計中的簡(jiǎn)寫(xiě)邊框屬性

當前URL:http://amzcoolest.com/news/wzzz/Border-attribute.html

上一篇:網(wǎng)頁(yè)設計中的邊框顏色

下一篇:網(wǎng)頁(yè)設計中的全局邊框

網(wǎng)站建設、網(wǎng)絡(luò )營(yíng)銷(xiāo)咨詢(xún)專(zhuān)線(xiàn):181-8386-5875(點(diǎn)擊可一鍵撥號)
亚洲精品无码mv在线|新国产精品视频福利免费|日韩高清在线观看不卡一区二区|一本久久a久久精品免费不|亚洲私人无码内射免费观看