我尝试使用CSS3渐变来复制爆炸形效果。经过多番摆弄后，我发现了它，只是在Safari中对其进行了测试并使其变得疯狂。就像Safari使用180deg，Chrome可以渲染270deg之类。
这是代码：http://codepen.io/syren/pen/Ahkrv
您的任何输入都会很有帮助。提前致谢！
更新：我注意到在本教程中：http://camenischcreative.com/blog/2011-04-26，Chrome中发生了相同的错误，但在Safari中有效。我注意到他们使用了-90deg到90deg，因此我在该范围内重写了-webkit-gradient-前缀的渐变，现在可以使用了。由于Chrome使用线性渐变，因此可以使用180deg至360deg的渐变，并且可以正常工作。
我将有问题的前缀渐变注释掉，以查看问题并取消注释。
这样我的问题就解决了，但是我仍然非常好奇是否有人遇到了这个问题，为什么会这样呢？
最佳答案
原因是在“覆盖”中，您没有包括所有供应商特定的渐变属性。
缺少适用于Firefox 3.6及更高版本，Old 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。
关于css3 - Safari中CSS3渐变的问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18117424/