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

现在，背景和边框模块指出，对于box-shadow（这也适用于text-shadow):

Where

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

每个的组成部分<shadow>解释如下：

• ...

• 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 and box-shadow。当然，这是可以理解的，因为如上所述，浏览器选择的任何颜色当时都可以。

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

¹ _{Note that in the mid-2012 WD, which is the latest as of this writing, an earlier statement in the same section contradicts the one quoted here, however the statement quoted here is the canonical one; see this mailing list thread and the ED where this has been fixed.}

CSS1 和 CSS2 中描述的行为已在颜色级别 3 中扩展为currentColor关键词值，这基本上意味着“计算值color对于此元素”，并且可以在任何接受颜色值的地方使用。正如您所期望的，这已被重新纳入border-colorpropdef 作为其初始值，如 B&B 模块中所示，here.

因为几乎所有浏览器都支持box-shadow and text-shadow也支持currentColor，您应该能够将其指定为阴影颜色：

text-shadow: 0 0 0.5em currentColor;
box-shadow: 0 0 0.5em currentColor;

这明确指示浏览器使用与文本相同的颜色，而不是编程使用的任何颜色，以某种方式正常化跨浏览器的行为。互动小提琴。

不幸的是，对于一些非常顽固的浏览器，例如某些 WebKit 浏览器的某些版本，问题不在于它们不使用currentColor，但事实是他们不执行currentColor正确使用这些属性。这意味着即使您确实尝试显式设置颜色值，它仍然无法工作，因为这就是他们已经所做的 - 他们只是没有正确执行。

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

Passing currentColor明确地does解决 Firefox 中的一个奇怪的错误，该错误阻止其动画往返text-shadow or box-shadow没有颜色分量的值 - 在上面链接的交互式小提琴中，如果您更改div:not(:hover)规则或div:hover删除规则currentColor无论哪种阴影声明，该阴影都不会在 Firefox 中产生动画。

如果您绝对需要支持旧版本的 WebKit 浏览器，您别无选择，只能硬编码所需的颜色。但考虑到这些浏览器自我更新的频率和速度，您最好还是担心旧版本的 IE。但请注意，IE9 没有问题支持box-shadow没有颜色分量，同样对于 IE10text-shadow，因此 IE 根本不需要此解决方法。震惊和敬畏。