3

有什么方法可以用 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 或画布的任何令人讨厌的技术，可以在没有可见径向线的情况下制作径向渐变吗？

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

谢谢！

4

1 回答 1

0

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

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/

于 2012-08-13T16:12:47.970 回答