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提供支持SVG背景但不支持CSS渐变的IE9。

在你的CSS中你会这样做：

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

更多信息：

http://modernizr.com

Answer 2

不要基于让IE开心来做出您的设计选择。使用渐进增强/分级浏览器支持并将IE推送到支持列表的底部。

选择CSS3：您的网站只会在IE上显示没有渐变的内容，这可能是一个可以接受的折衷方案。

Answer 3

您应该使用http://www.colorzilla.com/gradient-editor/生成CSS和SVG（对于IE9）。

示例：

background: #fefcea; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlZmNlYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmMWRhMzYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #fefcea 0%, #f1da36 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefcea), color-stop(100%,#f1da36)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #fefcea 0%,#f1da36 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #fefcea 0%,#f1da36 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #fefcea 0%,#f1da36 100%); /* IE10+ */
background: linear-gradient(top,  #fefcea 0%,#f1da36 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=0 ); /* IE6-8 */

它会自动生成IE9 svg代码

使用IE9支持完整的多站梯度（使用SVG）。添加一个 “渐变”类对所有具有渐变的元素进行添加以下覆盖HTML以完成IE9支持：

<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;
    }
  </style>
<![endif]-->

Answer 4

我选择在svg中实现我的线性渐变，因为我可以做一次，我当然只支持现代浏览器。

这是SVG，我只需要描述一次。我不确定是否有办法使用css定义x1y1和x2 y2坐标。很高兴被证明是错误的。

因此，如果CSS无法使用x1y1 x2y2坐标实现渐变，我猜这是使用svg线性渐变的优势。

以下代码可以直接用于inkscape。

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"     viewBox="0 0 200 200">

    <defs>
      <linearGradient id="grad1" x1="26.3" y1="0.2" x2="26.5" y2="3.9" gradientUnits="userSpaceOnUse">
         <stop offset="0" style="stop-color:#0284a4;stop-opacity:0.9" />
         <stop offset="1" style="stop-color:#0284a5;stop-opacity:1" />
      </linearGradient>
    </defs>
  <path id="skylevel10" fill="url(#grad1)" d="m 0 -0 201 0 0 6.7 c 0 0 -29.8 1.2  Z"/>
</svg>

为渐变选择SVG或CSS3

4 个答案: