CSS 文本阴影在移动设备上无法正确显示答案

【问题标题】：CSS text-shadow not displaying properly on mobileCSS 文本阴影在移动设备上无法正确显示
【发布时间】：2016-07-27 11:46:55
【问题描述】：

首先；大家好！我只是社区的新人。多年来，我一直在使用没有帐户的堆栈溢出，因为我总是能够找到我的答案。这个我不能，它一直困扰着我！

我在我的一个网站的标题中的 h2 元素上使用 text-shadow。它在我的桌面上正确显示（当前的 Chrome、Edge 和 Firefox 版本）。在我的手机（iPhone、当前 Chrome 和 Safari 版本）上，它会导致您在下面的通过堆栈溢出链接图像中看到。

有没有人知道这里发生了什么/以前见过它并知道解决方案？

CSS:
    .content h2 {
        text-shadow: 0 0 20px #000000;
    }

【问题讨论】：

【解决方案1】：

您的解决方案是 Polyfills。

即，在受支持的情况下使用 CSS 文本阴影，在不受支持的情况下使用 CSS 背景图像。

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

TLDR：

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

然后就是在你的 CSS 中按照 .no-textshadow .text-stroke{}

【讨论】：

在我读到的文档中，这是针对 ie 9 和以前的浏览器问题，Chrome 和 Safari IOS 中的问题是否相关？当我在手机上查看 w3 上的 text-shadow css 信息和示例时，我确实看到了使用相同代码的正确阴影。这不应该意味着存在不同的问题吗？
可能只是将文本阴影变为无？在媒体查询中
我这样做是作为原始帖子中所见的一种解决方法，很遗憾，因为它使图片上的 txt 可读性降低了一点.. ;) 感谢您的建议！

【解决方案2】：

解决方案：好的，它与 box-shadow 和 text-shadow 的组合有关。您看到的渐变是盒子阴影。我决定在所有屏幕宽度上使用非渐变框阴影解决方案，以使我的文本更具可读性。谢谢输入！

【讨论】：