Question

我尝试使用CSS3渐变复制一个星暴效果。经过多次摆弄后，我想出来了，只是在Safari中进行测试并让它变得疯狂。这就像Safari正在使用180deg，Chrome会渲染270deg。

您拥有的任何输入都会非常有用。提前谢谢！

更新：我注意到在本教程中http://camenischcreative.com/blog/2011-04-26，Chrome中出现了同样的错误，但在Safari中有效。我注意到他们使用了-90deg到90deg，所以我在该范围内重写了我的-webkit-gradient-prefixed渐变，现在它可以工作了。由于Chrome使用线性渐变，因此它使用180度到360度渐变，并且可以正常工作。

我将有问题的前缀渐变注释掉，以查看问题，取消注释。

所以我的问题已经解决了，但是如果有其他人遇到过这个问题，我仍然很好奇，你为什么认为这个问题？

Answer 1

原因是在“叠加层”中没有包含所有供应商特定的渐变属性。

Firefox 3.6 +，旧版Webkit（Safari 4 +，Chrome），Opera 11.1 +缺少以供应商为前缀的CSS渐变。

如果您也想支持这些浏览器，您必须执行以下操作：

/* FF3.6+ */ background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); 
/* Chrome,Safari4+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
/* Chrome10+,Safari5.1+ */ background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); 
/* Opera 11.10+ */ background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); 
/* IE10+ */ background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); 
/* W3C */ background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);

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

Safari中的CSS3渐变问题

1 个答案: