Web前端培訓實操環節中，同學們經常會遇到邊框的顏色設置問題。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模式設置顏色時，如果括號里面的數值為百分比，必須把“0”也加上百分號，寫作“0%”

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。