为什么CSS border-color继承了color属性？

Question

从字体的color属性继承边框颜色是正常的吗？我很惊讶地发现：

div
{
 border: 4px solid;
 color: red;
 height: 100px;
 width: 100px;
}

<div></div>

JSBIN

给了我一个带红色边框的div。通常不指定颜色将默认为黑色。这个奇怪的遗产是什么？

Answer 1

根据相关section 4.1的Backgrounds and Borders Module spec，初始border-color值为currentColor：

  

CSS Color Module - 4.4. currentColor color keyword

     

CSS1和CSS2将border-color属性的初始值定义为color属性的值，但未定义相应的关键字。这个省略被SVG识别，因此SVG 1.0为currentColor，fill，stroke，stop-color和{{1}引入了flood-color值} properties。

     

CSS3扩展颜色值以包含lighting-color关键字，以允许其与接受＆lt; color＆gt;的所有属性一起使用。值。这简化了CSS3中这些属性的定义。

换句话说，在您的情况下，该值被视为以下内容：

currentColor

因此，您还可以将border: 4px solid currentColor; 值用于currentColor属性等内容。例如：

background-color

div {
  color: red;
  width: 100px;
  height: 100px;
  border: 4px solid;
  background-color: currentColor;
}

小巧有趣的事实是，如果更改字体颜色（例如<div></div>），边框颜色会随之改变！ It also works well with transitions!

Answer 2

在CSS中，元素可以具有两种“主要”颜色之一：由color属性指定的前景颜色和由background-color属性指定的背景颜色。许多其他属性接受颜色，但是将黑色作为初始颜色值将是非常随意的，因此默认情况下接受颜色值的属性将采用计算的前景色。

当然，如果前景色为黑色，这个可以导致黑色边框，但只有这样。并且文本颜色仅为黑色，因为默认的UA样式表就是这样; CSS没有说明初始值应该是黑色的任何地方，但是它依赖于UA（CSS1，CSS2.1，CSS Color 3）。例如，高对比度模式或反色模式下的UA可以将默认颜色方案指定为黑色白色或完全不同的颜色组合：

自CSS1以来，这种行为一直存在。基于等效SVG关键字在CSS Color 3中引入的currentColor值现在列为相应CSS3模块中各个属性的初始值：

• border-color
• outline-color ¹
• box-shadow

当无法找到值时，使用带有颜色值的attr() 也会回退到currentColor。请参阅CSS Values 3。

在CSS3之前，一旦覆盖，就无法将边框或轮廓的颜色恢复为计算出的前景色;看我对this related question的回答。虽然这个问题使用“inherit”这个词，但应该注意的是，指定border-color: inherit 不会继承color属性 - 就像所有其他CSS属性一样，它继承自父元素的border-color。

¹ _{默认实际上是反转轮廓下方像素的颜色，但支持invert不是强制性的，如果浏览器选择不这样做，前景色必须改为使用。}