如何在所有浏览器上使用文本阴影和框阴影？

Question

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

现在,Backgrounds和Borders模块指出for box-shadow(也适用于text-shadow):

哪里

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

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

• ...

• 颜色是阴影的颜色.如果颜色不存在,则使用的颜色取自"颜色"属性.¹

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

但是,我知道阴影的情况并非总是如此 - 之前(2011年晚些时候!)所选择的颜色留给浏览器来决定文本模块和B&B模块.事实上,我记得过去的测试显示,有些浏览器选择了black其他浏览器,transparent或者完全忽略了阴影风格.这甚至可能在text-shadow和之间有所不同box-shadow.当然,这是可以理解的,因为如上所述,浏览器选择的任何颜色在当时都很好.

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

---

¹ _{请注意,在2012年年中的WD中,这是本文撰写时的最新版本,同一部分的早期声明与此处引用的声明相矛盾,但此处引用的声明是规范的声明; 看到这个邮件列表主题和已经修复的ED.}

Answer 1

CSS1和CSS2中描述的行为已在Color级别3中使用currentColor关键字值进行了扩展,这基本上意味着" color此元素的计算值",并且可以在接受颜色值的任何位置使用.正如您所料,这已经retconned到border-colorpropdef作为其初始值,作为B&B模块中看到,这里.

由于几乎每个支持box-shadow并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和以后应用的声明没有色差分量正确无论如何,他们甚至不需要此解决办法.

通过currentColor明确并解决在Firefox中一个奇怪的错误,防止它的动画,并从text-shadow或box-shadow值,而不色彩分量-在上面链接,交互小提琴如果更改了div:not(:hover)规则或div:hover规则删除currentColor无论从阴影声明,那黑影不会在Firefox中制作动画.

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