浏览器支持文本阴影传播值

时间:2013-01-05 20:33:21

标签: css compass-sass css3 spread

见过讨论here,但已经过了2年!

我不知道我是否正确使用此权限,但我有以下sass/compass代码:

+text-shadow(red 0 3px 0 3px)

生成以下css

text-shadow: red 0 3px 3px, red 0 3px 0 3px;
text-shadow: red 0 3px 0 3px, red 0 3px 0 3px;

这在Chrome / Safari / Firefox / Opera中都不适用。

这是声明的内容还是这个spread功能真的从规范中删除了?

3 个答案:

答案 0 :(得分:5)

它说in the specs

  

此属性接受以逗号分隔的阴影效果列表   应用于元素的文本。值被解释为   'box-shadow'[CSS3BG]。 (但请注意点差值 允许。)   阴影应用于所有元素的文本以及任何文本   它指定的装饰品。

答案 1 :(得分:3)

这并不理想,但由于text-shadow接受以逗号分隔的值列表,因此您可以将文本阴影“叠加”在一起,以获得更加不透明的结果。

text-shadow: 0 0 1px white, 0 0 2px white, 0 0 3px white;

答案 2 :(得分:-1)

当使用mixin时,指南针不允许设置传播值:text-shadow正如他们在文档中所述:

  

如果任何阴影具有扩展参数,这将导致mixin两次发出阴影声明,首先没有扩散,然后包含扩散。这允许您逐步增强支持spread参数的浏览器。

或者,您可以使用mixin:single-text-shadow 然后传递所有值,包括用逗号分隔的 spread

single-text-shadow(0, 3px, 0, 3px, red);

这将按预期工作。