Question

有没有办法用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或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/

CSS3渐变的大块

1 个答案: