border-color
CSS属性 border-color 是一个用于设置元素四个边框颜色的快捷属性: border-top-color, border-right-color, border-bottom-color, border-left-color。
示例
/* 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
浏览器支持
语法
border-color:color| horizontal| vertical| top| bottom| right| left| inherit
取值:
- color:使用
<color>
来表示四个边框的颜色,仅用于单值语法。 - horizontal:使用
<color>
来表示水平(左边框和右边框)边框的颜色,仅用于双值语法。 - vertical:使用
<color>
来表示垂直(上边框和下边框)边框的颜色,仅用于双值或三值语法。 - top:使用
<color>
来表示上边框的颜色,仅用于三值或四值语法。 - bottom:使用
<color>
来表示下边框的颜色,仅用于三值或四值语法。 - right:使用
<color>
来表示右边框的颜色,仅用于四值语法。 - left:使用
<color>
来表示左边框的颜色,仅用于四值语法。 - inherit:这是一个关键词,用于指示四边的颜色值均继承自父元素的计算值。
实例
#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;
}
<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>