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

问题描述

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

  div {border：4px solid;红色; height：100px; width：100px;}  

 < div>< / div>  

解决方案

基于相关第4.1 节=http://www.w3.org/TR/css3-background =nofollow>背景和边框模块规格，最初的 border-color 值为 currentColor ：

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

CSS1和CSS2定义< c $ c> border-color 属性为颜色属性的值，但未定义相应的关键字。这个省略被SVG识别，因此SVG 1.0为 fill ，引入了 currentColor > stroke ， stop-color ， flood-color 和 light-color 属性。

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

换句话说，在你的情况下，值被视为如下： p>

  border：4px solid currentColor; 
  

因此，您也可以使用 currentColor 用于诸如 background-color 属性的内容。例如：

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

 < div> ; / div>  

---

小有趣的事实，如果你改变字体颜色（例如：hover ），bordercolor会随之改变！ 它也适用于转场！

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

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

解决方案

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

CSS Color Module - 4.4. currentColor color keyword

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 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;

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>

---

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

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