border-color屬性設(shè)置單邊邊框和綜合四邊邊框顏色

border-color屬性用于設(shè)置邊框的顏色，其取值可為預(yù)定義的顏色英文單詞(如red、blue)、十六進(jìn)制顏色值#RRGGBB(如#FF0000或#F00)或RGB模式rgb(r,g,b)(如rgb(0,255,0)括號里是顏色色值或百分比)，實(shí)際工作中最常用的是十六進(jìn)制顏色值。

邊框的默認(rèn)顏色為元素本身的文本顏色，對于沒有文本的元素，例如只包含圖像的表格，其默認(rèn)邊框顏色為父元素的文本顏色。與邊框樣式和寬度相同，邊框顏色的單邊與綜合設(shè)置方式如下。

border-top-color:上邊框顏色;
border-right-color:右邊框顏色;
border-bottom-color:下邊框顏色;
border-left-color:左邊框顏色;
border-color:上邊框顏色[右邊框顏色下邊框顏色左邊框顏色];

綜合設(shè)置四邊顏色必須按順時(shí)針順序采用值復(fù)制原則，即一個(gè)值為四邊，兩個(gè)值為上下/左右，三個(gè)值為上/左右/下。

例如設(shè)置段落的邊框樣式為實(shí)線，上下邊灰色，左右邊紅色，代碼如下。

p
{border-style:solid;            /*綜合設(shè)置邊框樣式*/
border-color:#CCC#FF0000;    /*設(shè)置邊框顏色：兩個(gè)值為上下、左右*/
}

再如設(shè)置二級標(biāo)題的邊框樣式為實(shí)線，且下邊框?yàn)榧t色，其余邊框采用默認(rèn)文本的顏色，代碼如下。

h2{
border-style:solid;           /*綜合設(shè)置邊框樣式*/
border-bottom-color:red;      /*單獨(dú)設(shè)置下邊框顏色*/
}

注意：

1、設(shè)置邊框顏色時(shí)同樣必須設(shè)置邊框樣式，如果未設(shè)置樣式或設(shè)置為none，則其他的邊框?qū)傩詿o效。

2、使用rgb模式設(shè)置顏色時(shí)，如果括號里面的數(shù)值為百分比，必須把“0”也加上百分號，寫作“0%”

多學(xué)一招：巧用邊框透明色(transparent)

CSS2.1將元素背景延伸到了邊框，同時(shí)增加了transparent透明色。如果需要將已有的邊框設(shè)置為暫時(shí)不可見，可使用“border-color:transparent;”，這時(shí)如同沒有邊框，看到的是背景色，需要邊框可見時(shí)再設(shè)置相應(yīng)的顏色，這樣可以保證元素的區(qū)域不發(fā)生變化。這種方式與取消邊框樣式不同，取消邊框樣式時(shí)，雖然邊框也不可見，但是這時(shí)邊框的寬度為0，即元素的區(qū)域發(fā)生了變化。

猜你喜歡：

通過client獲取元素的上邊框和左邊框

CSS3盒子模型邊框怎樣實(shí)現(xiàn)圓角效果？

transition屬性用法【黑馬程序員CC3教程】

黑馬程序員前端與移動開發(fā)培訓(xùn)