border-bottom-color

概述

border-bottom-color 属性设置一个元素底部边框的颜色。应当指出，在多数情况下，CSS 简写属性 border-color 或 border-bottom 更方便实用。

初始值currentcolor
适用元素all elements. It also applies to ::first-letter.
是否是继承属性否
适用媒体visual
计算值computed color
Animation typea 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 默认值不同）

正式语法

<'border-top-color'>

示例

一个带有边框的简单 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 初始定义

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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

另见