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

从字体的

color

属性继承边框颜色是否正常？我惊讶地发现：

div
{
边框：4px实心；
颜色：红色；
高度：100px；
宽度：100px；
}

根据相关的属性，初始的

边框颜色

值为：

CSS1和CSS2将

边框颜色

属性的初始值定义为

颜色

属性的值，但未定义相应的关键字。SVG认识到了这一遗漏，因此SVG 1.0为

填充

，

笔划

，

停止颜色

，

泛光颜色

，以及

照明颜色

属性引入了

当前颜色

值

CSS3将颜色值扩展为包含

currentColor

关键字，以允许将其与接受某个值的所有属性一起使用。这简化了CSS3中这些属性的定义

换言之，在您的情况下，该值按以下方式处理：

border: 4px solid currentColor;

因此，您也可以将

currentColor

值用于

background color

属性。例如：

div{
颜色：红色；
宽度：100px；
高度：100px；
边框：4px实心；
背景色：当前颜色；
}

---

在CSS中，元素可以有两种“原色”中的一种：前景色（由

color

属性指定）和背景色（由

background color

属性指定）。许多其他属性接受颜色，但将黑色作为初始颜色值是非常任意的，因此默认情况下，接受颜色值的属性采用计算的前景色

当然，如果前景颜色为黑色，这可能会导致黑色边框，但只有在这种情况下。文本颜色一开始只是黑色的，因为默认的UA样式表使其成为黑色；CSS没有在任何地方声明初始值应为黑色，但它依赖于UA（，）。例如，处于高对比度模式或反转颜色模式的UA可以将默认颜色方案指定为黑对白，或完全不同的颜色组合：

这种行为从那时起就一直存在。基于等效SVG关键字引入的

currentColor

值现在列为各个CSS3模块中各个属性的初始值：

• 一,

当找不到值时，使用带有颜色值的

attr（）

也会返回到

currentColor

。看

在CSS3之前，一旦被覆盖，就无法将边框或轮廓的颜色恢复为计算的前景色；看看我对你的回答。虽然这个问题使用了“继承”一词，但应该注意的是，指定

边框颜色：继承

并不继承自

颜色

属性-与所有其他CSS属性一样，它继承自父元素的

边框颜色

---

---

1默认值实际上是反转轮廓下方像素的颜色，但支持

反转

不是强制性的，如果浏览器选择不反转，则必须使用前景色。

只是补充一点，自CSS 1（）以来一直是这样。这在更改颜色时也很有效，而且它一直与动画一起工作！在桌子上加了一把小提琴post@Martijn：考虑到您在小提琴中仅将过渡属性指定为

color

，我感到惊讶。在IE中，您需要同时指定

颜色和边框颜色

，以便边框与颜色一起设置动画。IE的行为更符合我的预期，但我不知道谁的行为是正确的。您没有定义边框颜色，因此您将其定义为与文本相同。文本颜色改变，因此边框颜色。。。但是，依赖textcolor作为bordercolor并不是最好的做法。这个问题与默认属性相反！正如@BoltClock in所指出的，这不是继承的问题，因为这只能从父对象传递给同一属性的子对象。@BoltClock如何“将边框或轮廓的颜色恢复为被覆盖后的计算前景色”？你的（其他）答案没有提到这一点。@Matt：它提到使用currentColor。