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

Posted 2023-02-24

【中文标题】如何让 text-shadow 和 box-shadow 在所有浏览器上使用文本颜色？

【英文标题】：How do I make text-shadow and box-shadow use the text color on all browsers?

【发布时间】：2013-05-15 08:17:51

【问题描述】：

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

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

在哪里

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

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

...

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

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

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

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

---

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

【参考方案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 值之间进行动画 - 在上面链接的交互式小提琴中，如果您更改 div:not(:hover) 规则或 div:hover 规则以从任一阴影声明中删除 currentColor，则该阴影不会在 Firefox 中设置动画。

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

【讨论】：

没错，但这是一个相对较新的关键字。 OP 关注的旧版浏览器是否支持此功能？

@Mr Lister：这并不是什么新鲜事——事实上，currentColor 是由 Firefox before box-shadow 或 -moz-box-shadow 实现的。我的回答中所说的“几乎所有浏览器”的例外是桌面 Safari -webkit-box-shadow 但不支持 currentColor），但我怀疑它是否已被广泛使用。

@Mr Lister：事实证明，Safari 5.x 在currentColor 方面存在问题，尽管这并不是什么新鲜事。我刚刚用更多浏览器兼容性发现更新了我的答案，诚然，这些发现应该在一开始就存在。