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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

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

回答：

根据相关背景和边框模块规范的第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），则边框颜色也会随之改变！它也适用于过渡！

以上是 为什么CSS border-color继承了color属性？ 的全部内容， 来源链接： utcz.com/qa/429551.html

回到顶部