更新時間:2022-04-28 來源:黑馬程序員 瀏覽量:
border-color屬性用于設置邊框的顏色,其取值可為預定義的顏色英文單詞(如red、blue)、十六進制顏色值#RRGGBB(如#FF0000或#F00)或RGB模式rgb(r,g,b)(如rgb(0,255,0)括號里是顏色色值或百分比),實際工作中最常用的是十六進制顏色值。
邊框的默認顏色為元素本身的文本顏色,對于沒有文本的元素,例如只包含圖像的表格,其默認邊框顏色為父元素的文本顏色。與邊框樣式和寬度相同,邊框顏色的單邊與綜合設置方式如下。
border-top-color:上邊框顏色; border-right-color:右邊框顏色; border-bottom-color:下邊框顏色; border-left-color:左邊框顏色; border-color:上邊框顏色[右邊框顏色下邊框顏色左邊框顏色];
綜合設置四邊顏色必須按順時針順序采用值復制原則,即一個值為四邊,兩個值為上下/左右,三個值為上/左右/下。
例如設置段落的邊框樣式為實線,上下邊灰色,左右邊紅色,代碼如下。
p {border-style:solid; /*綜合設置邊框樣式*/ border-color:#CCC#FF0000; /*設置邊框顏色:兩個值為上下、左右*/ }
再如設置二級標題的邊框樣式為實線,且下邊框為紅色,其余邊框采用默認文本的顏色,代碼如下。
h2{ border-style:solid; /*綜合設置邊框樣式*/ border-bottom-color:red; /*單獨設置下邊框顏色*/ }
注意:
1、設置邊框顏色時同樣必須設置邊框樣式,如果未設置樣式或設置為none,則其他的邊框屬性無效。
2、使用rgb模式設置顏色時,如果括號里面的數(shù)值為百分比,必須把“0”也加上百分號,寫作“0%”
多學一招:巧用邊框透明色(transparent)
CSS2.1將元素背景延伸到了邊框,同時增加了transparent透明色。如果需要將已有的邊框設置為暫時不可見,可使用“border-color:transparent;”,這時如同沒有邊框,看到的是背景色,需要邊框可見時再設置相應的顏色,這樣可以保證元素的區(qū)域不發(fā)生變化。這種方式與取消邊框樣式不同,取消邊框樣式時,雖然邊框也不可見,但是這時邊框的寬度為0,即元素的區(qū)域發(fā)生了變化。