首先；大家好!我只是社区的新人。多年来，我一直在没有帐户的情况下使用堆栈溢出，因为我总是能够找到我的答案。这个我做不到，它一直困扰着我!
我在我的网站标题中的 h2 元素上使用文本阴影。它在我的桌面上正确显示(当前的 Chrome、Edge 和 Firefox 版本)。在我的手机(iPhone、当前的 Chrome 和 Safari 版本)上，它会导致您在下面的 via stack overflow 链接图片中看到的内容。
In this image you'll see 'blocks' with some sort of gradient shade instead of text-shadow
有没有人知道这里发生了什么/以前见过它并且知道解决方案？
CSS:
.content h2 {
text-shadow: 0 0 20px #000000;
}
- 附言您现在无法重现该错误；我已经使用媒体查询从移动网站中删除阴影作为目前的解决方法
最佳答案
您的解决方案是 Polyfill。
即，在支持的地方使用 CSS 文本阴影，在不支持的地方使用 css 背景图像。
参见 http://modernizr.com/用于检测对文本阴影等的支持。
关于如何使用 Modernizr 的教程:http://www.hongkiat.com/blog/modernizr/
简单描述:
如果检测到浏览器不支持文本阴影，Modernizr 将向您的 HTML 元素添加一个 CSS 类 .no-textshadow。
然后就是按照 .no-textshadow .text-stroke{}
在您的 CSS 中提供回退关于ios - CSS 文本阴影无法在移动设备上正确显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38612079/