我正在尝试为一个带有与其文本颜色相同的阴影的框创建样式。因为我有几个框,每个框都有不同的文本颜色,所以我想避免在每个框的每个单独规则集中重复相同的颜色。
现在,背景和边框模块状态为 box-shadow
(这也适用于 text-shadow
):
Where
<shadow> = inset? && [ <length>{2,4} && <color>? ]
The components of each
<shadow>
are interpreted as follows:
...
The color is the color of the shadow. If the color is absent, the used color is taken from the ‘color’ property.1
这意味着如果您没有在给定元素上指定阴影颜色,则所使用的阴影颜色必须取自为该元素计算的文本颜色。这类似于与没有明确颜色的边框相关的行为,可以追溯到CSS1。并保持不变 CSS2 .
但是,我知道阴影的情况并非总是如此 — 以前(迟至 2011 年!)选择的颜色由浏览器在文本模块和 B&B 模块中决定。事实上,我记得过去的测试表明,一些浏览器选择了 black
其他人选择了transparent
(或完全忽略阴影样式)。这甚至可能在 text-shadow
之间变化和 box-shadow
.当然,这是可以理解的,因为如前所述,当时浏览器选择的任何颜色都可以。
但现在定义已经明确,所有浏览器的最新版本也反射(reflect)了变化,我能做些什么来让旧版本效仿吗?我知道我可以多次指定颜色——一次为文本,一次为每个阴影——但正如我所说,我想尽可能避免这种情况。
1 请注意,在撰写本文时最新的 2012 年年中 WD 中,同一部分中较早的声明与此处引用的声明相矛盾,但是此处引用的声明是规范的;见this mailing list thread和 ED这已被修复。
最佳答案
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
值 — 在上面链接的交互式 fiddle 中,如果您更改 div:not(:hover)
规则或 div:hover
规则从任一影子声明中删除 currentColor
,该影子不会在 Firefox 中设置动画。
如果您绝对需要支持旧版本的 WebKit 浏览器,您别无选择,只能硬编码所需的颜色。但是考虑到这些浏览器无论如何都会更新自己的频率和速度,您最好还是担心 IE 的旧版本。但是请注意,IE9 可以在没有颜色组件的情况下支持 box-shadow
,对于具有 text-shadow
的 IE10 也是如此,因此 IE 根本不需要此解决方法。 Shock and awe.
关于cross-browser - 如何让 text-shadow 和 box-shadow 在所有浏览器上使用文本颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16560018/