我此刻很困惑。我有这个渐变
background-image: -webkit-radial-gradient(50% 65%, ellipse cover, #f2f2f4, #201935 55%);
它适用于Safari,适用于Safari将用户代理更改为
Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5
这与iPad中的webkit和浏览器完全相同
但是,当我在ipad上加载它本身不起作用时,他们的论坛说webkit得到了支持...有人可以帮助我使它工作吗?
或者,有人可以帮助我获得与webkit-gradient相同的结果(我无法实现调整大小调整以及径向渐变,也不能实现椭球形式),因为显然有两种支持?
我认为这是iOS目前使用的webkit版本的问题。
Desktop Safari也存在径向渐变至5.1版的问题。
根据我的理解,将桌面Safari的用户代理更改为5.0只会更改报告给浏览器的用户代理字符串,而不是实际使用的渲染引擎。
遗憾的是,在iOS模拟器上运行确认了iOS上目前无法使用径向渐变,这也是我使用运行Android 3.2进行测试的平板电脑的问题。
好消息是我们迫切需要iOS和Android的操作系统更新,所以希望这个问题能够消失。
如果你真的需要从现在到iOS 5和Android 4之间的径向渐变,你将不得不求助于背景图像或SVG。 :(
(如果有人知道一个CSS技巧来解决这个问题,那么我真的很想听听它。)
您可以使用较旧的WebKit语法指定渐变,如下所示:
background-image: -webkit-gradient(radial, 50% 65%, 0, 50% 65%, 200, color-stop(0, #f2f2f4), color-stop(55%, #201935));
遗憾的是,您无法指定点半径的百分比。
-webkit-linear-gradient和webkit-radial-gradient属性需要iOS 5.0或更高版本,或桌面上的Safari 5.1或更高版本。如果您需要支持早期版本的iOS或Safari,请参阅“Prior Syntax (-webkit-gradient)”。