MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

这篇翻译不完整。请帮忙从英语翻译这篇文章

概括

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.
是否是继承属性
适用媒体visual
计算值as each of the properties of the shorthand:
  • border-bottom-color: If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgba(0,0,0,0).
  • border-left-color: If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgba(0,0,0,0).
  • border-right-color: If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgba(0,0,0,0).
  • border-top-color: If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgba(0,0,0,0).
是否适用于 CSS 动画as each of the properties of the shorthand:
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

/* border-color: color; 单值语法 */ 
border-color: red;

/* border-color: horizontal vertical; 双值语法*/
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
这是一个关键词,用于指示四边的颜色值均继承自父元素的计算值。

语法定义

<color>{1,4}

where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

where
<rgb()> = rgb( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText

where
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>

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 首次被定义

 

浏览器兼容性

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

其他参考

文档标签和贡献者

 此页面的贡献者: Sebastianz, Howard.Chen
 最后编辑者: Sebastianz,