带有 CSS3 渐变的大块答案

【问题标题】：Big blocks with CSS3 gradients带有 CSS3 渐变的大块
【发布时间】：2012-08-07 12:39:10
【问题描述】：

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

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

CSS3 - FF 13 过度使用大渐变 (3200x1600)，当添加该渐变时，即使是简单的 CSS3 标签过渡也非常缓慢。

SVG - 体验太低，没有测试太多，图像质量低于 CSS3

VML——对于IE，没有经验

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

你知道 CSS3 或画布的任何令人讨厌的技术吗？可见径向线？

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

谢谢！

【问题讨论】：

标签： css canvas background gradient radial

【解决方案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/

【讨论】：

在这里你会看到 ))) jsfiddle.net/Hz8ME/1 如果没有尝试看到不同程度的展示。我刚刚制作了 1500x1500px 的块
我们仍然需要非常非常小心地使用 CSS3，浏览器仍然太丑陋（我在使用 css3 的过程中看到越来越多的 chrome 错误。