具有 CSS3 渐变的大块

Question

有什么方法可以使用CSS3径向梯度实现良好的性能大块吗？就像在这个网站上一样。http://www.medora.ca/wp-content/themes/medora/images/bgNoise4.jpg （3200x1600）

画布 - 在映像生成期间阻止 JS 并创建超时。

CSS3 - FF 13 因大渐变 （3200x1600） 而过载，当添加该渐变时，即使是标签的简单 CSS3 过渡也非常缓慢。

SVG - 经验太低，不要测试太多，图像质量低于 CSS3

VML - 对于 IE，没有经验

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

你知道CSS3或canvas有什么技术吗，可以在没有的情况下进行径向渐变可见的径向线？

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

谢谢！

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/