具有CSS3梯度的大块

Question

有没有办法用CSS3径向梯度实现高性能的大块？就像在这个网站上。http://www.medora.ca/wp-content/themes/medora/images/bgNoise4.jpg (3200x1600)

Canvas -在图像生成期间阻止JS并创建超时。

CSS3 -FF13的梯度太大了(3200x1600)，当添加梯度时，即使是标签的简单CSS3转换也非常慢。

体验太低，不要测试太多，图像质量比CSS3低

VML -对于IE，没有经验

我提到，对于Chrome添加这么大的块与径向CSS3渐变，有很好的性能。

你是否知道任何CSS3或画布的设计技术，使径向渐变没有可见的径向线条？

如果你能提供一些例子链接，我将不胜感激。

谢谢!

Answer 1

这就是我想出来的。我还没有在大型块上尝试过，但在这个块中，我看不到可见的径向线条：

HTML：

<div id="gradient_div"></div>

CSS:

#gradient_div {
  margin: 0 auto;
  border-radius: 20px;
  width: 500px;
  height: 500px;    
  background-color:rgba(171, 171, 171, 0.1);
  background-image: -moz-radial-gradient(50% 0%, circle cover, rgba(171, 171, 171, 0.3), #242bff 50%);
  background-image: -webkit-radial-gradient(50% 0%, circle cover, rgba(171, 171, 171, 0.3), #242bff 50%);
  background-image: -o-radial-gradient(50% 0%, circle cover, rgba(171, 171, 171, 0.3), #242bff 50%);
  background-image: -ms-radial-gradient(50% 0%, circle cover, rgba(171, 171, 171, 0.3), #242bff 50%);
  background-image: radial-gradient(50% 0%, circle cover, rgba(171, 171, 171, 0.3), #242bff 50%);
}

这是一个你可以随意修改的JSFiddle版本：http://jsfiddle.net/Hz8ME/