为什么CSS的边框颜色会继承颜色属性？

Question

一个边框颜色继承自字体的color属性，这正常吗？我很惊讶地发现：

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

<div></div>

JSBIN

该链接提供一个带红色边框的 div。通常未指定颜色会默认为黑色。这是什么奇怪的继承？

- 1252748

---

这个问题是 将CSS边框颜色设置为文本颜色 的反向问题。 - BoltClock

这是默认属性！它的作用就是这样。 - Deepak Yadav

正如@BoltClock在他的回答中指出的那样，这不是继承的问题，因为它只能从父级传递给具有相同属性的子级。 - Michael Benjamin

Answer 1

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

以下是翻译内容：

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

CSS1和CSS2将border-color属性的初始值定义为color属性的值，但没有定义相应的关键字。SVG意识到了这个遗漏，因此SVG 1.0引入了currentColor值，用于fill、stroke、stop-color、flood-color和lighting-color属性。

CSS3扩展了颜色值，包括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），边框颜色也会随之改变！它还可以很好地与过渡效果配合使用！

- Josh Crozier

---

只是补充一下，这种情况从CSS 1（http://www.w3.org/TR/CSS1/#border-color）开始就存在了。 - Gabriele Petrioli

这在改变颜色时也很有效，并且它可以与动画一起使用！在帖子中添加了一个小工具。 - Martijn

@Martijn：我很惊讶它能工作，因为在你的fiddle中你只指定了color属性进行过渡。在IE中，你需要同时指定color, border-color才能使边框随颜色一起动画化。IE的行为更符合我的预期，但我不知道哪个行为实际上是正确的。 - BoltClock

在我看来它表现正常。由于你没有定义边框颜色，所以默认是和文本一致的颜色。而由于文本颜色改变了，所以边框颜色也会跟着改变。但是依赖文本颜色来确定边框颜色并不是最佳实践。 - Martijn

Answer 2

在CSS中，一个元素可以有两种“主要”颜色：前景色，由color属性指定，和背景色，由background-color属性指定。许多其他属性接受颜色，但如果将黑色作为初始颜色值，那么它将非常任意，因此接受颜色值的属性默认采用计算出的前景色。

当然，如果前景色是黑色，这可能会导致黑色边框，但仅限于这种情况。文本颜色之所以起初是黑色，只是因为默认UA样式表使其如此；CSS没有声明初始值应该是黑色，而是与UA相关的（CSS1，CSS2.1，CSS Color 3）。例如，处于高对比度模式或反色模式的UA可以指定默认颜色方案为白色背景黑色字体或完全不同的颜色组合：

这种行为自CSS1以来一直存在。基于等效的SVG关键字，currentColor值在CSS Color 3中被引入，并列在各自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 是非强制性的，如果浏览器选择不支持，必须使用前景色代替。}

- BoltClock

---

@BoltClock，你如何“将边框或轮廓的颜色恢复为计算出的前景色一旦被覆盖”？你的（其他）答案没有提到这一点。 - Matt

@Matt：它提到使用currentColor。 - BoltClock