从font的color属性继承边框颜色是正常的吗？我很惊讶地发现:
div
{
border: 4px solid;
color: red;
height: 100px;
width: 100px;
}
JSBIN
给了我一个带红色边框的div.通常不指定颜色将默认为黑色.这个奇怪的遗产是什么？
根据相关背景和边界模块规范的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扩展了颜色值以包含
currentColor关键字,以允许其与所有接受值的属性一起使用.这简化了CSS3中这些属性的定义.
换句话说,在您的情况下,该值被视为以下内容:
border: 4px solid currentColor;
因此,您还可以将该currentColor值用于background-color属性等内容.例如:
div {
color: red;
width: 100px;
height: 100px;
border: 4px solid;
background-color: currentColor;
}在CSS中,元素可以具有两种"主"颜色之一:由color属性指定的前景颜色和由属性指定的背景颜色background-color.许多其他属性接受颜色,但是将黑色作为初始颜色值将是非常随意的,因此默认情况下接受颜色值的属性采用计算的前景色.
当然,如果前景色为黑色,这可能会导致黑色边框,但仅限于此.并且文本颜色仅为黑色,因为默认的UA样式表就是这样; CSS没有说明初始值应该是黑色的任何地方,但它是UA依赖的(CSS1,CSS2.1,CSS Color 3).例如,高对比度模式或反色模式下的UA可以将默认颜色方案指定为黑色白色或完全不同的颜色组合:
自CSS1以来,这种行为一直存在.CSS Color 3中基于等效SVG关键字currentColor引入的值现在列为各个CSS3模块中相应属性的初始值:
border-color
outline-color1
box-shadow
使用attr()颜色值也会回落到currentColor无法找到值时.请参阅CSS值3.
在CSS3之前,一旦覆盖,就无法将边框或轮廓的颜色恢复为计算出的前景色; 看到我对这个相关问题的回答.虽然这个问题使用"inherit"这个词,但应该注意的是,指定border-color: inherit 不会从color属性继承- 就像所有其他CSS属性一样,它继承自border-color父元素.
1 默认实际上是反转轮廓下方像素的颜色,但支持invert不是强制性的,如果浏览器选择不这样做,则必须使用前景色.
京公网安备 11010802040832号 | 京ICP备19059560号-6 