我正在尝试为包含与文本颜色相同的阴影的框创建样式。因为我有几个盒子，每个盒子都有不同的文字颜色，所以我想避免在每个盒子的每个单独的规则集中重复相同的颜色。
现在，背景和边框模块指出box-shadow（也适用于text-shadow）：
其中
<shadow> = inset? && [ <length>{2,4} && <color>? ]每个
<shadow>的组件解释如下：
...
颜色是阴影的颜色。如果颜色不存在，则使用的颜色取自“颜色”属性。 1
这意味着如果您没有在给定元素上指定阴影颜色，则必须从为该元素计算的文本颜色中获取所使用的阴影颜色。这与没有明确颜色的边框相关联的行为类似，可以追溯到CSS1并在CSS2中保持不变。
然而，我知道阴影的情况并非总是如此 - 之前（2011年晚些时候！）所选择的颜色留给浏览器来决定文本模块和B＆amp; B模块。事实上，过去的测试表明，有些浏览器选择了black而其他浏览器选择了transparent（或完全忽略了阴影样式）。这可能在text-shadow和box-shadow之间有所不同。当然，这是可以理解的，因为如上所述，浏览器选择的任何颜色当时都可以。
但是现在定义已经明确，所有浏览器的最新版本也反映了这一变化，有什么办法可以让旧版本效仿吗？我知道我可以多次指定颜色 - 一次用于文本，一次用于每个阴影 - 但就像我说的，如果可能的话，我想避免使用它。
1 请注意，在2012年年中的WD中，这是本文撰写时的最新版本，同一部分的早期声明与此处引用的声明相矛盾，但此处引用的声明是规范的;请参阅this mailing list thread以及已修复此问题的ED。
答案 0 :(得分：12)
CSS1和CSS2中描述的行为已在Color级别3中使用currentColor keyword value进行了扩展，这基本上意味着“此元素的color的计算值”，并且可以在颜色值的任何位置使用被接受了。正如您所料，这已被重新调整为border-color propdef作为其初始值，如B＆amp; 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，而是它们没有实现的事实{{ 1}}正确使用这些属性。这意味着即使您尝试明确设置颜色值，它仍然无法工作，因为这是他们已经做的 - 他们只是没有正确地做。
具体来说，已知Safari在版本4之前不支持currentColor，但由于我无法理解的原因，Safari 5.x无法正确应用上述声明，尽管能够应用类似{ {1}}很好。我相信这在Safari 6.x及更高版本中已得到修复，但由于6.x及以后应用声明而没有正确的颜色组件无论如何，他们甚至不需要这种解决方法。
明确地传递currentColor 解决Firefox中的一个奇怪错误，阻止它在没有颜色组件的情况下设置为background-color: currentColor或currentColor值的动画 - 在上面链接的交互式小提琴中，如果您更改text-shadow规则或box-shadow规则以从任何影子声明中删除div:not(:hover)，则该影子不会在Firefox中设置动画。
如果您绝对需要支持旧版本的WebKit浏览器，您将别无选择，只能硬编码所需的颜色。但是考虑到这些浏览器无论如何频繁和快速地更新自己，你可能最好不要担心IE的旧版本。但请注意，IE9在没有颜色组件的情况下支持div:hover没有问题，对于带有currentColor的IE10也是如此，因此IE根本不需要这种解决方法。 Shock and awe.