作者：耿世述_511 | 来源：互联网 | 2023-05-16 12:21
我很好奇currentColor以及它在其他属性中继承和/或使用时的行为方式.另一方面是省略border-property中的颜色值,例如默认为text-color.
.outer {
color: #f90;
border: 5px solid;
box-shadow: 0 0 15px;
text-shadow: 2px 2px 3px;
}
Outer Div
上面的片段没什么好看的.
阴影和边框与文本颜色相同.
现在让我们继承颜色:
.outer {
color: #f90;
border: 5px solid;
box-shadow: 0 0 15px;
text-shadow: 2px 2px 3px;
}
.inner {
color: lime;
display: inline-block;
border: inherit;
box-shadow: inherit;
}
Outer Div
Inner Div no CurrentColor
Resutls:
在IE11和Chrome 43中,只有文字颜色是石灰.
另一方面,在Firefox 38中,阴影也是绿色.(注意不是边框)
当主动将所有内容设置为currentColor时,浏览器通过仅显示石灰中的文本和橙色中的所有其他内容显示相同的结果.(正如您在底部的最后一个片段中看到的那样)
/**
* playing with currentColor
*/
body {background: darkgray;} /* friendly wink */
.outer {
width: 85%;
color: #f90;
border: 5px solid;
box-shadow: 0 0 15px;
text-shadow: 2px 2px 3px;
padding: 15px; margin: 15px;
}
.outer.currentColor {
border: 5px solid;
box-shadow: 0 0 15px currentColor;
text-shadow: 2px 2px 3px currentColor;
}
.inner {
color: lime;
display: inline-block;
border: inherit;
box-shadow: inherit;
}
.inner.resetting {
border-color: currentColor;
/* text-shadow-color: currentColor; /* does not exist */
/* box-shadow-color: currentColor; /* does not exist */
}
Outer Div
Inner Div no CurrentColor
Outer Div
Inner Div with CurrentColor
Inner Div with CurrentColor
问题:
省略currentColor时,为什么Firefox中的边框有所不同
为什么继承不使用同一元素的颜色值？
有没有办法使用相同的属性和切换颜色？(对于边框颜色,您可以通过重置它在示例中看到)
如果你想玩它,这里也是一个dabblet链接:http://dabblet.com/gist/587ea745c7cda7a906ee
1> 小智..：
所以,这里有一些事情:
CSS工作组同意在CSS颜色级别3和CSS颜色级别4之间更改currentColor的含义.在级别3中,它在计算值时间被解析并且计算值被继承; 在级别4中,关键字currentColor作为计算值继承,并在使用的值时间解析.
虽然我找不到会议记录,但有很多理由要做出这种改变,而且我已经忘记了所有的细节.(我可以在https://lists.w3.org/Archives/Public/www-style/2014Feb/0052.html上找到分钟来讨论事后的变化.)这会使转换/动画更糟糕,但在其他案件的数量.它略微增加了实现复杂性,但提高了性能(至少在Gecko中).
我认为大多数实现还没有机会更新到Level 4中的新规则.Gecko肯定没有,尽管它在我要做的事情列表中(但不在顶部).
很长一段时间(早在currentColor存在之前),Firefox已经实现了一个特殊的内部值作为border - * - color和outline-color的初始值.(我们也对文本装饰颜色做了同样的事情,但是自1998/1999以来没有这样做.)这就像4级currentColor那样工作,所以一旦我们切换实现,我们可以统一这两件事,但我们不能不要使用3级currentColor切换我们的实现,因为它是一个重要的性能和内存命中,因为它是属性的初始值.(实际上,统一我们的实现意味着我们为每个其他具有颜色值的属性执行相同的工作.)
text-shadow和box-shadow,当省略颜色时,明确指定了省略颜色的行为,因为它等同于level 4定义currentColor的方式,甚至在currentColor以这种方式工作之前:参见box-shadow的定义(text-shadow的定义只指向box-shadow).
京公网安备 11010802041100号