border-color
概括
CSS属性
border-color
是一个用于设置元素四个边框颜色的快捷属性: border-top-color
, border-right-color
, border-bottom-color
, border-left-color
初始值 | as each of the properties of the shorthand:
|
---|---|
适用元素 | all elements. It also applies to ::first-letter . |
是否是继承属性 | 否 |
计算值 | as each of the properties of the shorthand:
|
Animation type | as each of the properties of the shorthand: |
语法
/* border-color: color; 单值语法 */
border-color: red;
/* border-color: vertical horizontal; 双值语法*/
border-color: red #f015ca;
/* border-color: top horizontal bottom; 三值语法 */
border-color: red yellow green;
/* border-color: top right bottom left; 四值语法 */
border-color: red yellow green blue;
border-color: inherit
取值
color
- 使用
<color>
来表示四个边框的颜色,仅用于单值语法。 horizontal
- 使用
<color>
来表示水平(左边框和右边框)边框的颜色,仅用于双值语法。 vertical
- 使用
<color>
来表示垂直(上边框和下边框)边框的颜色,仅用于双值或三值语法。 top
- 使用
<color>
来表示上边框的颜色,仅用于三值或四值语法。 bottom
- 使用
<color>
来表示下边框的颜色,仅用于三值或四值语法。 right
- 使用
<color>
来表示右边框的颜色,仅用于四值语法。 left
- 使用
<color>
来表示左边框的颜色,仅用于四值语法。 inherit
- 这是一个关键词,用于指示四边的颜色值均继承自父元素的计算值。
语法定义
border-color =
<color>{1,4}
<color> =
<absolute-color-base> |
currentcolor |
<system-color> |
<device-cmyk()>
<absolute-color-base> =
<hex-color> (en-US) |
<named-color> |
transparent |
<rgb()> |
<rgba()> |
<hsl()> |
<hsla()> |
<hwb()> |
<lab()> |
<lch()> |
<oklab()> |
<oklch()> |
<color()>
<device-cmyk()> =
device-cmyk( <cmyk-component>{4} [ / <alpha-value> ]? )
<rgb()> =
rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? ) |
rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<hsl()> =
hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<hwb()> =
hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<lab()> =
lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lch()> =
lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<oklab()> =
oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<oklch()> =
oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<color()> =
color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<cmyk-component> =
<number> |
<percentage>
<alpha-value> =
<number> |
<percentage>
<hue> =
<number> |
<angle> |
none
<colorspace-params> =
<predefined-rgb-params> |
<xyz-params>
<predefined-rgb-params> =
<predefined-rgb> [ <number> | <percentage> | none ]{3}
<xyz-params> =
<xyz-space> [ <number> | none ]{3}
<predefined-rgb> =
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
<xyz-space> =
xyz |
xyz-d50 |
xyz-d65
Complete_border-color_usage2
HTML
<div id="justone">
<p><code>border-color: red;</code> is equivalent to</p>
<ul><li><code>border-top-color: red;</code></li>
<li><code>border-right-color: red;</code></li>
<li><code>border-bottom-color: red;</code></li>
<li><code>border-left-color: red;</code></li>
</ul>
</div>
<div id="horzvert">
<p><code>border-color: gold red;</code> is equivalent to</p>
<ul><li><code>border-top-color: gold;</code></li>
<li><code>border-right-color: red;</code></li>
<li><code>border-bottom-color: gold;</code></li>
<li><code>border-left-color: red;</code></li>
</ul>
</div>
<div id="topvertbott">
<p><code>border-color: red cyan gold;</code> is equivalent to</p>
<ul><li><code>border-top-color: red;</code></li>
<li><code>border-right-color: cyan;</code></li>
<li><code>border-bottom-color: gold;</code></li>
<li><code>border-left-color: cyan;</code></li>
</ul>
</div>
<div id="trbl">
<p><code>border-color: cyan black gold;</code> is equivalent to</p>
<ul><li><code>border-top-color: red;</code></li>
<li><code>border-right-color: cyan;</code></li>
<li><code>border-bottom-color: black;</code></li>
<li><code>border-left-color: gold;</code></li>
</ul>
</div>
CSS
#justone {
border-color: red;
}
#horzvert {
border-color: gold red;
}
#topvertbott {
border-color: red cyan gold;
}
#trbl {
border-color: red cyan black gold;
}
div {
border: solid 0.3em;
width: auto;
margin: 0.5em;
padding: 0.5em;
}
ul {
margin: 0;
list-style: none;
}
规范
规范 | 状态 | 说明 |
---|---|---|
CSS Backgrounds and Borders Module Level 3 border-color |
Candidate Recommendation | 移除了transparent 关键词,该关键词已归入<color> 数据类型。 |
CSS Level 2 (Revision 1) border-color |
Recommendation | 被当作快捷属性 |
CSS Level 1 border-color |
Recommendation | 首次被定义 |
浏览器兼容性
BCD tables only load in the browser
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! (en-US)
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 1.0 | 1.0 (1.7 or earlier) [1] | 4.0 | 3.5 | 1.0 (85) |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 4.0 | 1.0 (1.9.2) [1] | 7.0 | 11 | 1.0 |
[1] The following Mozilla extensions set the border sides to multiple colors for Gecko based browsers like Firefox. -moz-border-top-colors
, -moz-border-right-colors
, -moz-border-bottom-colors
, -moz-border-left-colors
(en-US)
其他参考
- 与 border-color 相关的 CSS 属性:
border
,border-top-color
,border-right-color
,border-bottom-color
,border-left-color
, - 与边框相关的其他 CSS 属性:
border-width
,border-style