苹果手机浏览器字体渐变色无效？

赶海的大鲨鱼

于 2022-06-23 19:10:07 发布

阅读量956

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端 css

本文链接：https://blog.youkuaiyun.com/why_994/article/details/125433157

博客讲述了在CSS中使用渐变背景创建文字效果时遇到的兼容性问题。在谷歌和Android浏览器上正常显示，但在iPhone浏览器上失效。通过添加`display:block;`解决了该问题，使得文字渐变效果在iPhone上也能正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天遇到一个兼容性问题
在这里插入图片描述
这种渐变性文字css如下

 background-image: -webkit-linear-gradient(left, #4142df, #e84176);
 -webkit-background-clip: text;
 background-clip: text;
 -webkit-text-fill-color: transparent;

在谷歌浏览器，Android浏览器都能正常显示，在iPhone的浏览器中无法显示，最后找了很多办法，最后用

 display: block;

解决…