概述
border-bottom-color 属性设置一个元素底部边框的颜色。应当指出，在多数情况下，CSS 简写属性 border-color 或 border-bottom 更方便实用。
| 初始值 | currentColor |
|---|---|
| 适用元素 | all elements. It also applies to ::first-letter. |
| 是否是继承属性 | 否 |
| 适用媒体 | visual |
| 计算值 | If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgba(0,0,0,0). |
| 是否适用于 CSS 动画 | yes, as a color |
| 正规顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
border-bottom-color: yellow; border-bottom-color: #F5F6F7;
值
<color>- 一个描绘底边的颜色的 CSS
<color>值。 inherit- 一个代表父元素底边颜色的关键字（可能和
border-bottom-color默认值不同）
正式语法
<color>where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where
<rgb()> = rgb( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowTextwhere
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>
示例
一个带有边框的简单 div
HTML 内容
<div class="mybox">
<p>This is a box with a border around it.
Note which side of the box is
<span class="redtext">red</span>.</p>
</div>
CSS 内容
.mybox {
border: solid 0.3em gold;
border-bottom-color: red;
width: auto;
}
.redtext {
color: red;
}
结果
规范
| 规范 | 状态 | 注释 |
|---|---|---|
| CSS Backgrounds and Borders Module Level 3 border-bottom-color |
Candidate Recommendation | 无重大变化，不过 transparent 关键字被正式移除，该关键字现在被包含在已扩展的 <color> 里。 |
| CSS Level 2 (Revision 1) border-bottom-color |
Recommendation | 初始定义 |
浏览器兼容性
| 特性 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| 基础支持 | 1.0 | 1.0 (1.7 or earlier)[1] | 4 | 3.5 | 1.0 (85) |
| 特性 | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| 基础支持 | 1.0 | 1.0 (1.0)[1] | 6.5 | 11 | 1.0 |
[1] 像 Firefox 这样，基于 Gecko 的浏览器也支持非标准的 -moz-border-bottom-colors CSS 属性，来设置底边多重颜色。
另见
- 边框相关的 CSS 简写属性
border,border-bottom和border-color。 - 用于其它边框颜色相关的 CSS 属性：
border-right-color,border-top-color, 和border-left-color。 - 同样用于底边的其它边框相关的 CSS 属性：
border-bottom-style和border-bottom-width。