Web前端培訓實操環(huán)節(jié)中，同學們經(jīng)常會遇到邊框的顏色設(shè)置問題。border-color屬性用于設(shè)置邊框的顏色，其取值可為預(yù)定義的顏色英文單詞(如red、blue)、十六進制顏色值#RRGGBB(如#FF0000或#F00)或RGB模式rgb(r,g,b)(如rgb(0,255,0)括號里是顏色色值或百分比)，實際工作中最常用的是十六進制顏色值。

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

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

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

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

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

再如設(shè)置二級標題的邊框樣式為實線，且下邊框為紅色，其余邊框采用默認文本的顏色，代碼如下。

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

注意：

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

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

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

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

總結(jié)

以上是生活随笔為你收集整理的border-color属性设置单边边框和综合四边边框颜色的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。