border-color
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
概括
CSS 属性 border-color
是一个用于设置元素四个边框颜色的快捷属性: border-top-color
、border-right-color
、border-bottom-color
、border-left-color
。
初始值 | 该简写所对应的每个属性:
|
---|---|
适用元素 | 所有元素. It also applies to ::first-letter . |
是否是继承属性 | 否 |
计算值 | 该简写所对应的每个属性:
|
动画类型 | 该简写所对应的每个属性: |
语法
css
/* 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
-
这是一个关键词,用于指示四边的颜色值均继承自父元素的计算值。
语法定义
Complete_border-color_usage2
HTML
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
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;
}
规范
Specification |
---|
CSS Logical Properties and Values Level 1 # logical-shorthand-keyword |
CSS Backgrounds and Borders Module Level 3 # border-color |
浏览器兼容性
BCD tables only load in the browser
其他参考
- 与 border-color 相关的 CSS 属性:
border
,border-top-color
,border-right-color
,border-bottom-color
,border-left-color
, - 与边框相关的其他 CSS 属性:
border-width
,border-style