为什么CSS border-color继承了color属性? [英] Why is the CSS border-color inheriting the color property?

问题描述

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

Is it normal that a border color would be inherited from font's color property? I was surprised to find that:

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

<div></div>

JSBIN

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

gives me a div with a red border. Usually not specifying a color will default to black. What is this odd inheritance?

推荐答案

基于背景和边界模块规范的第4.1节， border-color的初始值为 currentColor :

Based on section 4.1 of the relevant Backgrounds and Borders Module spec, the initial border-color value is currentColor:

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

CSS1和CSS2将border-color属性的初始值定义为color属性的值，但是未定义相应的关键字. SVG意识到了这一遗漏，因此SVG 1.0为fill，stroke，stop-color，flood-color和lighting-color属性引入了currentColor值.

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将颜色值扩展为包含currentColor关键字，以允许其与接受< color>的所有属性一起使用.价值.这简化了CSS3中这些属性的定义.

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.

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

In other words, the value is treated as the following in your case:

border: 4px solid currentColor;

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

Therefore you could also use the currentColor value for something such as the background-color property. For instance:

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

<div></div>

小巧的事实，如果您更改字体颜色(例如:hover)，则边框颜色也会随之改变！ 它也可以很好地适应转换！

Small fun fact, if you change the font color (e.g. :hover), the bordercolor changes with it! It also works well with transitions!

这篇关于为什么CSS border-color继承了color属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！