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

【问题标题】：CSS text-shadow in Mobile Browsers移动浏览器中的 CSS 文本阴影
【发布时间】：2014-12-15 11:40:00
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

您的解决方案是 Polyfills。

即，在受支持的情况下使用 CSS text-shadow，在不受支持的情况下使用 CSS background-image。

请参阅http://modernizr.com/ 以检测是否支持文本阴影等。

TLDR：

如果 Modernizr 检测到浏览器不支持文本阴影，它将向您的 HTML 元素添加 CSS 类 .no-textshadow。

然后就是按照.no-textshadow .text-stroke{} 的行在您的 CSS 中提供一个备用方案

【讨论】：

【解决方案2】：

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

Chrome for Android 39 或更高版本。

编辑：

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

【讨论】：