CSS 渐变...意见？

Question

我已经设计网站很长时间了，只是使用渐变图像，对于小渐变，这似乎工作正常并且不会增加太多加载时间，但现在新的 CSS (webkit/moz/o) 有太多碎片/khtml，更不用说 ie 6,7,8,9)

所以为了只有一个通用渐变，需要大量的 CSS。

对于需要大量渐变的网站，我使用 Less.js 使其稍微好一点，但这只是到目前为止......

我只是想知道在图像上使用 css 渐变在多大尺寸上更有意义，如果真的存在断点的话。

[例如。一个小的 5px 渐变，只有 5px 的图像更有意义，但像 1000px 渐变一样，只使用 css 可能更有意义]

哦，我知道有 SVG，我还没有真正尝试过，但效果好吗？

如有任何意见，我们将不胜感激。 :)

Answer 1

使用图片的问题是你能做的事情受到更多限制。如果您想使用背景渐变并且框比您预期的要大，则渐变要么提前停止，要么开始重复。这两种解决方案可能都不是您想要的。

你可以查看 www.css3please.com有关如何在 css3 中获得良好效果的示例(使用实时示例代码)。对于背景渐变，您可以使用以下内容:

.box_gradient {
  background-color: #444444;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Saf5.1+ */
  background-image:    -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
  background-image:     -ms-linear-gradient(top, #444444, #999999); /* IE10 */
  background-image:      -o-linear-gradient(top, #444444, #999999); /* Opera 11.10+ */
  background-image:         linear-gradient(top, #444444, #999999);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6–IE9 */
}