Browser support for text-shadow spread value

只谈情不闲聊 提交于 2019-12-06 07:53:12

It says in the specs that,

This property accepts a comma-separated list of shadow effects to be applied to the text of the element. Values are interpreted as for ‘box-shadow’ [CSS3BG]. (But note that spread values are not allowed.) The shadow is applied to all of the element's text as well as any text decorations it specifies.

It's not ideal, but since text-shadow accepts a comma separated list of values, you can "stack" text-shadows on top of each other to get a more opaque outcome.

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

Compass doesn't allow to set the spread value when using the mixin: text-shadow as they said in their documentation:

if any shadow has a spread parameter, this will cause the mixin to emit the shadow declaration twice, first without the spread, then with the spread included. This allows you to progressively enhance the browsers that do support the spread parameter.

Alternatively, you can use the mixin: single-text-shadow then pass all the values including the spread value separated with commas.

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

That will work as you expected.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!