網(wǎng)頁設(shè)計中的邊框顏色

  • 2018-12-13 17:38:11
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來源:http://supportcoffeeroasters.com

與邊框的其他方面相比,設(shè)置顏色很簡單。網(wǎng)站建設(shè)CSS使用了一個簡單屬性border-color,它一次可以接受最多4個顏色值。

border-color

值:[<color>|transparent]{1,4} | inherit

初始值:對簡寫屬性未定義

應(yīng)用于:所有元素

繼承性:無

計算值:見單個屬性(border-top-color等)

如果網(wǎng)頁設(shè)計的邊框值小于4個,值復制就會起作用。如果設(shè)計人員希望h1元素有細的黑色上下邊框,而且有粗的灰色左右邊框,另外希望P元素外有中等粗細的灰色邊框,就可以用以下標記,其結(jié)果見圖8-28:

h1{border-style:solid;border-width:thin thick;border-color:black gray;}

p{border-style:solid;border-color:gray;}

當然一個顏色值會應(yīng)用到所有4個邊,前例中的段落就是如此。另一方面,如果應(yīng)用了4個顏色值,那么每邊都會有不同的顏色??梢允褂萌魏晤愋偷念伾担缈梢允敲伾?,也可以是十六進制和RGB值:

p{border-style:solid;border-width:thick;

border-color:black rgb(25%,25%,25%)#808080 silver;}

本章前面提到過,如果沒有聲明顏色,默認顏色則是元素的前景色。因此,以下聲明會顯示為如圖8-29所示情景:

p.shadel {border-style; solid; border-width: thick; color: gray;} p.shade2 {border-style: solid; border-width: thick; color: gray; border-color: black;}

圖8-29:根據(jù)元素的前景色及border-color屬性值確定的邊框顏色

其結(jié)果是第一段有一個灰色邊框,值gray取自段落的前景色。不過,第二段有一個黑色邊框,因為這是使用border-color顯式指定的顏色。

還有一些單邊border-color屬性。其原理與單邊樣式和寬度屬性相同。網(wǎng)站建設(shè)人員要為標題指定一個實線黑色邊框,而且右邊框為實線灰色,可以如下指定:

h1{border-style:solid;border-color:black;border-right-color:gray;}

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

值:<color>| transparent | inherit

初始值:元素的color值

應(yīng)用于:所有元素

繼承性:無

計算值:如果沒有指定值,則使用同一元素的color屬性的計算值,否則,根據(jù)指定確定

透明邊框

你應(yīng)該還記得,如果一個邊框沒有樣式,就沒有寬度。不過,有些情況下網(wǎng)頁制作人員可能想創(chuàng)建一個不可見的邊框。這就引人了邊框顏色值transparent(在CSS2中引入)。這個值用于創(chuàng)建有寬度的不可見邊框。

假設(shè)你希望包含3個鏈接的一組鏈接有邊框,默認地這些邊框不可見,不過,鼠標停留在鏈接上時邊框要凸起。為此可以讓邊框在鏈接處于非懸停狀態(tài)下透明:

a:link, a:visited {border-style: solid; border-width: 5px; border-color: transparent;} a:hover {border-color: gray;}

從某種意義上說,利用transparent,使用邊框就像是額外的內(nèi)邊距一樣,此外還有一個好處,就是能在你需要的時候使其可見。這種透明邊框相當于內(nèi)邊距,因為元素的背景會延伸到邊框區(qū)(假設(shè)有可見的背景)。

警告:在IE7之前,IE/Win沒有提供對transparent的支持。在以前的版本中,IE會根據(jù)元素的color值來設(shè)置邊框顏色。

當前文章標題:網(wǎng)頁設(shè)計中的邊框顏色

當前URL:http://supportcoffeeroasters.com/news/wzzz/Border-color.html

上一篇:

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