我有这个非常简单的HTML文档:
<html>
<head>
<title>test</title>
</head>
<body>
<div style="text-shadow: 0px 0px 5px black">
This should have a text shadow.
</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
在Chrome 12.0.742.0(最新开发版)中,文本阴影根本不显示 - 它看起来就像普通文本一样.如果你删除了第三个参数(spread)它会渲染,但是当你不想要一个1像素的非模糊阴影时,这在大多数情况下是没用的.如何让它正确显示?我认为我的语法可能有误,但我不这么认为,因为此页面上只有部分阴影显示在Chrome中:http://www.w3.org/Style/Examples/007/text-shadow.
目标
我需要加强文本阴影效果.
当前解决方案
根据MDN,"text-shadow ...接受以逗号分隔的阴影列表",所以我只复制了同一个阴影的几个层:
.glow-triple {
text-shadow: 0 0 10px gold, 0 0 10px gold, 0 0 10px gold;
}
Run Code Online (Sandbox Code Playgroud)
(小提琴:http://jsfiddle.net/targumon/wdhLqjrh/)
我的问题
是否有比这种重复使用更简洁的方法?
之前的研究
我发现另外两个SO Q&As触及了这个主题,但它们没有解决我的具体问题:
编辑
由badfilms的答案触发,spread关键字揭示了另一个SO Q&A: