css - 为渐变选择 SVG 或 CSS3

Question

我想在我正在开发的新网站中大量使用渐变。我一直在想在 CSS3 或 SVG 中实现渐变是否更好。

通常我只需要多站线性渐变，所以两者都能满足我的需求。

我最初认为这最好用 CSS3 完成，但开始质疑我的决定并希望得到其他意见。

到目前为止，我的想法是 SVG(作为 CSS 背景)可能更好，因为:

• 它适用于 IE9
• 没有浏览器前缀，我的 CSS 更简洁
• 轻松重用梯度

CSS3 可能更好，因为:

• 看起来像是 CSS 的工作
• 减少客户的下载
• 一切都在一个地方

一个我不知道答案的重要考虑因素是哪个表现更好？

是否有实现背景渐变的最佳实践？

Answer 1

根据 Lea Verou 进行的测试(我相信她的工作)，CSS 渐变速度更快: http://lea.verou.me/2011/08/css-gradients-are-much-faster-than-svg/

更新:

您还可以考虑使用 modernizr 为支持 SVG 背景但不支持 CSS 渐变的 IE9 提供 SVG。

在您的 CSS 中，您只需执行以下操作:

.cssgradients #someElement { /* Gradient background rule. */ }
.no-cssgradients #someElement { /* SVG background rule. */ }

更多信息在这里:

http://modernizr.com