CSS 径向渐变不适用于 iPhone 和 Mac

Posted 2023-02-23

【中文标题】CSS 径向渐变不适用于 iPhone 和 Mac

【英文标题】：CSS radial gradient not work for iPhone and Mac

【发布时间】：2021-08-02 14:42:25

【问题描述】：

我的 div 的背景样式有这段代码，适用于所有移动设备和桌面，但不适用于 ios。 这是我的代码：

#test
box-shadow: -1px 0px 5px 1px #ccc;
padding:20px;
background: radial-gradient(#f7f7f7 2px, transparent 3px), radial-gradient(#f7f7f7 2px,transparent 3px), #fff;
background-position-x: 0%, 0%, 0%;
background-position-y: 0%, 0%, 0%;
background-size: auto, auto, auto;
background-position: 0 0, 20px 20px;background-size: 10px 10px;
height:100px;

<div id="test">
</div>

在 iOS 上，背景中的点显示为空而不是完整的。如何修复我的代码以在 iOS 设备上查看背景中的实心点？

【参考方案1】：

也设置以下属性，因为只有 radial-gradient 不适用于所有浏览器。

background: -webkit-linear-gradient();
background: -moz-linear-gradient();
background: linear-gradient();

使用 thiswebsite 生成这些属性。

【讨论】：

嗨！所以在我的代码之前我还必须写背景：-webkit-radial-gradient();背景：-moz-radial-gradient ();对吗？