cross-browser - 如何让 text-shadow 和 box-shadow 在所有浏览器上使用文本颜色？

Question

我正在尝试为一个带有与其文本颜色相同的阴影的框创建样式。因为我有几个框，每个框都有不同的文本颜色，所以我想避免在每个框的每个单独规则集中重复相同的颜色。

现在，背景和边框模块状态为 box-shadow (这也适用于 text-shadow ):

Where

<shadow> = inset? && [ <length>{2,4} && <color>? ]

The components of each <shadow> are interpreted as follows:

• ...

• The color is the color of the shadow. If the color is absent, the used color is taken from the ‘color’ property.¹

这意味着如果您没有在给定元素上指定阴影颜色，则所使用的阴影颜色必须取自为该元素计算的文本颜色。这类似于与没有明确颜色的边框相关的行为，可以追溯到CSS1。并保持不变 CSS2 .

但是，我知道阴影的情况并非总是如此 — 以前(迟至 2011 年!)选择的颜色由浏览器在文本模块和 B&B 模块中决定。事实上，我记得过去的测试表明，一些浏览器选择了 black其他人选择了transparent (或完全忽略阴影样式)。这甚至可能在 text-shadow 之间变化和 box-shadow .当然，这是可以理解的，因为如前所述，当时浏览器选择的任何颜色都可以。

但现在定义已经明确，所有浏览器的最新版本也反射(reflect)了变化，我能做些什么来让旧版本效仿吗？我知道我可以多次指定颜色——一次为文本，一次为每个阴影——但正如我所说，我想尽可能避免这种情况。

---

¹ _{请注意，在撰写本文时最新的 2012 年年中 WD 中，同一部分中较早的声明与此处引用的声明相矛盾，但是此处引用的声明是规范的；见this mailing list thread和 ED这已被修复。}

Answer 1

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，但由于我无法理解的原因，Safari 5.x 无法正确应用上述声明，尽管能够应用像 background-color: currentColor 这样的东西就好了。我相信这在 Safari 6.x 及更高版本中已修复，但由于 6.x 及更高版本应用了没有颜色组件的声明无论如何，它们甚至不需要此解决方法。

显式传递 currentColor确实解决了 Firefox 中的一个奇怪错误，该错误阻止它在 text-shadow 或 之间进行动画处理没有颜色分量的 box-shadow 值 — 在上面链接的交互式 fiddle 中，如果您更改 div:not(:hover) 规则或 div:hover 规则从任一影子声明中删除 currentColor，该影子不会在 Firefox 中设置动画。

如果您绝对需要支持旧版本的 WebKit 浏览器，您别无选择，只能硬编码所需的颜色。但是考虑到这些浏览器无论如何都会更新自己的频率和速度，您最好还是担心 IE 的旧版本。但是请注意，IE9 可以在没有颜色组件的情况下支持 box-shadow，对于具有 text-shadow 的 IE10 也是如此，因此 IE 根本不需要此解决方法。 Shock and awe.