css - Safari 中的 CSS3 渐变问题

Question

我尝试使用 CSS3 渐变复制星爆效果。经过一番摆弄后，我终于弄清楚了，只是在 Safari 中测试它并让它发疯。就像 Safari 使用 180 度，而 Chrome 会渲染 270 度或其他。

代码如下:http://codepen.io/syren/pen/Ahkrv

您提供的任何意见都会非常有帮助。提前致谢!

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

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

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

Answer 1

原因是在“覆盖”中您没有包含所有供应商特定的渐变属性。

Missing vendor-prefixed CSS gradients for Firefox 3.6+, Old Webkit (Safari 4+, Chrome), Opera 11.1+.

如果你也想支持这些浏览器，你必须这样做:

/* 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-线性-梯度和线性-gradinet。