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

Question

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

现在，背景和边框模块状态，对于box-shadow（也适用于text-shadow）：

在哪里

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

每个组件的<shadow>解释如下：

• ...

• 颜色是阴影的颜色。如果颜色不存在，则使用的颜色取自“颜色”属性。¹

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

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

但既然定义已经明确，所有浏览器的最新版本也反映了这一变化，我能做些什么来让旧版本效仿吗？我知道我可以多次指定颜色——一次用于文本，一次用于每个阴影——但就像我说的那样，如果可能的话，我想避免这种情况。

---

¹ _{请注意，在撰写本文时最新的 2012 年中期 WD 中，同一部分的较早声明与此处引用的声明相矛盾，但此处引用的声明是规范的；请参阅此邮件列表线程和已修复此问题的ED 。}

Answer 1

CSS1 和 CSS2 中描述的行为已在 Color level 3 中使用currentColor关键字 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;

这明确地指示浏览器使用与文本相同的颜色，而不是其他任何编程使用的颜色，从而规范跨浏览器的行为。交互式小提琴。

不幸的是，对于一些非常顽固的浏览器，比如某些 WebKit 浏览器的某些版本，问题不在于它们不使用currentColor，而在于它们没有currentColor正确实现这些属性。这意味着即使您确实尝试显式设置颜色值，它仍然无法正常工作，因为他们已经这样做了——他们只是没有正确地做到这一点。

具体来说，已知 Safari 在版本 4 之前不支持currentColor任何内容，但由于我无法理解的原因，Safari 5.x 无法正确应用上述声明，尽管能够应用类似的东西background-color: currentColor。我相信这在 Safari 6.x 及更高版本中已修复，但由于 6.x 及更高版本无论如何都正确应用了没有颜色组件的声明，他们甚至不需要这种解决方法。

currentColor显式传递确实可以解决 Firefox 中的一个奇怪错误，该错误会阻止它在没有颜色组件的情况下对值进行动画处理 - 在上面链接的交互式小提琴中，如果您更改规则或text-shadow规则以从任一阴影声明中删除，则该阴影不会在 Firefox 中设置动画。box-shadowdiv:not(:hover)div:hovercurrentColor

如果您绝对需要支持旧版本的 WebKit 浏览器，您将别无选择，只能硬编码所需的颜色。但是考虑到这些浏览器的更新频率和速度，您最好还是担心旧版本的 IE。但是请注意，IE9 在没有box-shadow颜色组件的情况下支持没有问题，对于带有 的 IE10 也是如此text-shadow，因此 IE 根本不需要这种解决方法。震惊和敬畏。