uniapp开发H5在Safari上渐变色的处理

antlers777_

已于 2022-10-19 11:04:32 修改

阅读量270

点赞数

分类专栏： uni-app 文章标签： uni-app 前端 css

于 2022-10-19 11:03:59 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43952913/article/details/127403904

版权

uni-app 专栏收录该内容

7 篇文章

订阅专栏

这篇博客主要讨论了在使用UNIAPP开发的H5项目中遇到的一个问题：背景渐变色在Safari浏览器上无法正常显示。作者分享了谷歌浏览器可以正常工作，但在苹果手机上的Safari浏览器中渐变色不显示的状况，并提出了两种不同的解决方案，尝试通过修改CSS样式来兼容Safari。内容涉及CSS渐变、UNIAPP的H5适配以及移动浏览器的兼容性问题。

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

UNIAPP 针对Safari等浏览器的渐变色不显示

Safari等浏览器的渐变色不显示

谷歌浏览器正常显示，但在苹果手机上不行

background-image: -webkit-linear-gradient(bottom, #90EE90,  #008000,#00FF00);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

更换成：

content: attr(data-text);
color: green;
-webkit-mask-image: -webkit-gradient(linear, 4 0, 0 bottom, from(#008000), to(rgba(240, 255, 255, 0.4)));

uniapp开发H5在Safari上渐变色的处理

Safari等浏览器的渐变色不显示

谷歌浏览器正常显示，但在苹果手机上不行

更换成：

这个项目使用uniapp开发的H5，打包APP暂不清楚