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

Question

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

div

{

 border: 4px solid;

 color: red;

 height: 100px;

 width: 100px;

}


<div></div>

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

Answer 1

根据相关背景和边框模块规范的第4.1节，初始值为：border-colorcurrentColor

根据相关背景和边框模块规范的第4.1节，初始值为：border-colorcurrentColor

CSS颜色模块-4.4。currentColor颜色关键字

CSS1和CSS2将border-color属性的初始值定义为属性的值，color但未定义相应的关键字。这种省略通过SVG认可，因此SVG 1.0介绍了currentColor该值fill，stroke，stop-color，flood-color，和lighting-color特性。

CSS3将color值扩展为包括currentColor关键字，以允许其与接受<color>值的所有属性一起使用。这简化了CSS3中这些属性的定义。

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

border: 4px solid currentColor;

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

div {

  color: red;

  width: 100px;

  height: 100px;

  border: 4px solid;

  background-color: currentColor;

}


<div></div>

有趣的是，如果您更改字体颜色（例如:hover），则边框颜色也会随之改变！它也适用于过渡！