MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

border-bottom-color

概述

border-bottom-color 属性设置一个元素底部边框的颜色。应当指出,在多数情况下,CSS 简写属性 border-colorborder-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 | WindowText

where
<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 属性,来设置底边多重颜色。

另见

文档标签和贡献者

 此页面的贡献者: xhlsrj
 最后编辑者: xhlsrj,