Question

我在safari 5.0.2上遇到css渐变问题。 css代码正在使用safari 5.1但在5.0中，它无法正常工作。为什么会这样？有什么想法吗？

这是我的代码：

background: -webkit-linear-gradient(top, #D82102, #B90602);
background: -moz-linear-gradient(top, #D82102, #B90602);
background: -ms-linear-gradient(top, #D82102, #B90602);
background: -o-linear-gradient(top, #D82102, #B90602);
background: linear-gradient(to bottom, #D82102, #B90602);

我忘了什么吗？请帮我。它困扰了我。

Answer 1

尝试添加：

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8));

Answer 2

原因是您未包含所有供应商特定的渐变属性。

Firefox 3.6 +，旧版Webkit（Safari 4 +，Chrome），Opera 11.1 +

缺少以供应商为前缀的CSS渐变

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));

您只使用 webkit-linear-gradient 和 linear-gradinet 。

Answer 3

Safari 5.0不支持CSS渐变。只有5.1及更高版本支持它。您可以在w3学校查看 - https://www.w3schools.com/css/css3_gradients.asp

另一方面，apple-safari网站页面说明版本4.0及更高版本支持渐变。它还提到了如何使用它们 - https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariCSSRef/Articles/Functions.html#//apple_ref/doc/uid/TP40007955-SW25

Answer 4

要使线性渐变适用于所有支持的浏览器

background: -moz-linear-gradient(black, white); /* FF 3.6+ */  
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff)); /* Safari 4+, Chrome 2+ */  
background: -webkit-linear-gradient(black, white); /* Safari 5.1+, Chrome 10+ */  
background: -o-linear-gradient(black, white); /* Opera 11.10 */  
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff'); /* IE6 & IE7 */  
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')"; /* IE8+ */  
background: linear-gradient(black, white); /* the standard */

Safari 5.0.2中的渐变不起作用

4 个答案: