我正在尝试为带有阴影的框创建样式,该阴影的颜色与其文本相同。因为我有几个框,每个框的文字颜色不同,所以我希望避免在每个框的每个规则集中重复相同的颜色。
现在,Backgrounds and Borders模块针对 box-shadow (这也适用于 text-shadow )指出:

这意味着,如果您未在给定元素上指定阴影颜色,则使用的阴影颜色必须取自为该元素计算的文本颜色。这类似于与没有明确颜色的边框相关联的行为,该行为可以追溯到CSS1并在CSS2中保持不变。
但是,我知道阴影并不总是这样-以前(直到2011年!),所选颜色留给浏览器来决定在“文本”模块和B&B模块中使用。我记得,过去的测试确实表明,某些浏览器选择了black,而另一些选择了transparent(或完全忽略了阴影样式)。甚至在text-shadowbox-shadow之间可能有所不同。当然,这是可以理解的,因为如上所述,浏览器选择的任何颜色在当时都是可以的。
但是,既然定义已经明确,所有浏览器的最新版本也都反射(reflect)了这一变化,那么我能做些什么使旧版本也能效仿?我知道我可以多次指定颜色-一次为文本指定一次,为每个阴影指定一次-但是就像我说的那样,如果可能的话,我希望避免这种情况。

1请注意,在2012年中的WD(这是撰写本文时的最新成果)中,同一部分中的较早声明与此处引用的内容矛盾,然而,此处引用的说明是规范的;请参阅this mailing list thread和已修复的ED

最佳答案

CSS1和CSS2中描述的行为已在颜色级别3中使用 currentColor keyword value进行了扩展,这基本上意味着“此元素的color的计算值”,并且可以在接受颜色值的任何地方使用。如您所料,这已重新定义为border-color propdef作为其初始值,如B&B模块here所示。

由于几乎所有支持box-shadowtext-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-shadowbox-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/

10-13 01:57
查看更多