2

我尝试使用 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 度的渐变，并且可以正常工作。

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

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

4

1 回答 1

2

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

缺少 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。

于 2013-08-08T04:08:24.787 回答