我正在尝试为带有阴影的框创建样式,该阴影的颜色与其文本相同。因为我有几个框,每个框的文字颜色不同,所以我希望避免在每个框的每个规则集中重复相同的颜色。
现在,Backgrounds and Borders模块针对 box-shadow
(这也适用于 text-shadow
)指出:
这意味着,如果您未在给定元素上指定阴影颜色,则使用的阴影颜色必须取自为该元素计算的文本颜色。这类似于与没有明确颜色的边框相关联的行为,该行为可以追溯到CSS1并在CSS2中保持不变。
但是,我知道阴影并不总是这样-以前(直到2011年!),所选颜色留给浏览器来决定在“文本”模块和B&B模块中使用。我记得,过去的测试确实表明,某些浏览器选择了black
,而另一些选择了transparent
(或完全忽略了阴影样式)。甚至在text-shadow
和box-shadow
之间可能有所不同。当然,这是可以理解的,因为如上所述,浏览器选择的任何颜色在当时都是可以的。
但是,既然定义已经明确,所有浏览器的最新版本也都反射(reflect)了这一变化,那么我能做些什么使旧版本也能效仿?我知道我可以多次指定颜色-一次为文本指定一次,为每个阴影指定一次-但是就像我说的那样,如果可能的话,我希望避免这种情况。
1请注意,在2012年中的WD(这是撰写本文时的最新成果)中,同一部分中的较早声明与此处引用的内容矛盾,然而,此处引用的说明是规范的;请参阅this mailing list thread和已修复的ED。
最佳答案
CSS1和CSS2中描述的行为已在颜色级别3中使用 currentColor
keyword value进行了扩展,这基本上意味着“此元素的color
的计算值”,并且可以在接受颜色值的任何地方使用。如您所料,这已重新定义为border-color
propdef作为其初始值,如B&B模块here所示。
由于几乎所有支持box-shadow
和text-shadow
的浏览器也都支持currentColor
,因此您应该能够将其指定为阴影颜色:
text-shadow: 0 0 0.5em currentColor;
box-shadow: 0 0 0.5em currentColor;
这明确指示浏览器使用与文本相同的颜色,而不是编程使用的其他颜色,以某种方式normalizing跨浏览器的行为。 Interactive fiddle.
不幸的是,对于某些真正顽固的浏览器(例如某些WebKit浏览器的某些版本),问题不在于它们没有使用
currentColor
,而是它们没有正确地使用这些属性实现currentColor
。这意味着,即使您确实尝试显式设置颜色值,也仍然无法使用,因为那是他们已经做过的事情-他们只是没有正确地进行设置。具体来说,已知Safari在版本4之前不支持
currentColor
,但是由于我无法理解的原因,尽管可以使用background-color: currentColor
之类的东西,但Safari 5.x无法正确应用上述声明。我相信这在Safari 6.x和更高版本中已得到解决,但是由于6.x和更高版本在没有正确使用颜色组件的情况下应用声明,因此他们甚至都不需要此解决方法。显式传递
currentColor
确实可以解决Firefox中的一个奇怪错误,该错误会阻止它在没有颜色成分的情况下与text-shadow
或box-shadow
值进行动画显示-如果您更改了div:not(:hover)
规则或div:hover
规则从其中删除了currentColor
,则在上面的交互式提琴中无论是阴影声明,该阴影在Firefox中都不会激活。如果您绝对需要支持旧版本的WebKit浏览器,则别无选择,只能对所需的颜色进行硬编码。但是考虑到这些浏览器的更新频率和速度,您最好不用担心IE的旧版本。但是请注意,IE9毫无问题地支持不带颜色组件的
box-shadow
,同样对于具有text-shadow
的IE10也是如此,因此IE完全不需要这种解决方法。 Shock and awe.关于cross-browser - 如何在所有浏览器中使文本阴影和框阴影使用文本颜色?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/16560018/