移动浏览器中的CSS文本阴影

Question

我尝试使用以下样式使用text-shadow创建文本笔划：

.text-stroke {
text-shadow: -1px -1px 0 white,
1px -1px 0 white,
-1px 1px 0 white,
1px 1px 0 white;
}

它不适用于Firefox和Chrome的移动版本。我有什么办法可以让它在移动设备上运行吗？

Answer 1

您可以在Can i use网站中查看。它向您展示了浏览器对CSS标签的支持。

Chrome for Android 39或更高版本。

编辑：

将模糊半径设置为1px或更高。

Answer 2

您的解决方案 Polyfills 。

即，在支持的地方使用CSS text-shadow，并使用不受支持的css background-image。

请参阅http://modernizr.com/以检测text-shadow的支持情况。

如何使用Modernizr的教程：http://www.hongkiat.com/blog/modernizr/

TLDR：

如果检测到浏览器不支持文本阴影，

Modernizr会向您的.no-textshadow元素添加一个CSS类HTML。

然后就是在.no-textshadow .text-stroke{}

的行中提供CSS的后备问题