border-bottom-color 属性设置一个元素底部边框的颜色。应当指出，在多数情况下，CSS 简写属性 border-color或border-bottom更方便实用。
/* <color> values */ border-bottom-color: red; border-bottom-color: #ffbb00; border-bottom-color: rgb(255, 0, 0); border-bottom-color: hsla(100%, 50%, 25%, 0.75); border-bottom-color: currentColor; border-bottom-color: transparent; /* Global values */ border-bottom-color: inherit; border-bottom-color: initial; border-bottom-color: unset;
|
初始值 |
currentcolor |
|---|---|
|
适用元素 |
all elements. It also applies to ::first-letter. |
|
是否是继承属性 |
no |
|
适用媒体 |
visual |
|
计算值 |
computed color |
|
Animation type |
a color |
|
正规顺序 |
the unique non-ambiguous order defined by the formal grammar |
语法
border-bottom-color属性被指定为单个值。
值
<color>一个描绘底边的颜色的 CSS<color>值。
正式语法
<color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color> where <rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] ) <rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] ) <hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] ) <hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] ) where <alpha-value> = <number> | <percentage> <hue> = <number> | <angle>
示例
一个带有边框的简单 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; }
结果
规范
|
Specification |
Status |
Comment |
|---|---|---|
|
CSS Backgrounds and Borders Module Level 3The definition of 'border-bottom-color' in that specification. |
Candidate Recommendation |
No significant changes, though the transparent keyword, now included in <color> which has been extended, has been formally removed. |
|
CSS Level 2 (Revision 1)The definition of 'border-bottom-color' in that specification. |
Recommendation |
Initial definition |
浏览器兼容性
|
Feature |
Chrome |
Edge |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari (WebKit) |
|---|---|---|---|---|---|---|
|
Basic support |
1.0 |
(Yes) |
1.0 (1.7 or earlier)1 |
4 |
3.5 |
1.0 (85) |
|
Feature |
Android |
Edge |
Firefox Mobile (Gecko) |
IE Phone |
Opera Mobile |
Safari Mobile |
|---|---|---|---|---|---|---|
|
Basic support |
1.0 |
(Yes) |
1.0 (1.0)1 |
6.5 |
11 |
1.0 |
1 Firefox等基于Gecko的浏览器也支持将底部边框设置为多种颜色的非标准CSS属性-moz-border-bottom-colors。
另见
- 边界相关的简写属性：
border，border-bottom，和border-color。
- 对于其他边框颜色相关CSS属性：
border-right-color，border-top-color，和border-left-color。
- 应用于相同的边框的其他边框相关的CSS属性：
border-bottom-style和border-bottom-width。
