css - 为什么 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 and CSS2 defined the initial value of the border-color property to be the value of the color property but did not define a corresponding keyword. This omission was recognized by SVG, and thus SVG 1.0 introduced the currentColor value for the fill, stroke, stop-color, flood-color, and lighting-color properties.

CSS3 extends the color value to include the currentColor keyword to allow its use with all properties that accept a <color> value. This simplifies the definition of those properties in CSS3.

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

border: 4px solid currentColor;

因此，您还可以将 currentColor 值用于诸如 background-color 属性之类的东西。例如:

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

<div></div>

---

有趣的是，如果你改变字体颜色(例如 :hover)，边框颜色也会随之改变! It also works well with transitions!