使用SVG实现gradient背景渐变
2. 点击线性渐变选项卡
3. 修改起止点坐标，使形成黄色至红色的渐变
4. 修改左下角边框大小为0
5. 选择左侧的矩形选项
6. 在白色面板上拖出个合适大小的矩形
7. 点击左上角长得像卫星的小图标就可以查看对应的SVG代码了
然后拷贝该XML标记代码转为svg文件，就大功告成了。
例如，您要查看上面演示的黄红渐变SVG文件可以狠狠地点击这里：黄红垂直渐变SVG
或者狠狠地点击这里：黄红垂直渐变SVG应用demo
另外， 点击左上角铅笔插菊花的标志，可以导入SVG进行编辑
IE9浏览器已经支持了SVG。现代浏览器最新的版本也是支持的。具体如下：
上面演示过了，没什么好说的。您可以狠狠地点击这里：SVG与线性渐变测试demo
SVG代码如下：
于是乎，配合其他图片，我们就有类似下面的页面效果：
您可以狠狠地点击这里：SVG实现径向渐变demo
更赞的效果
效果如下：
您可以狠狠地点击这里：SVG实现曲线投影demo
SVG图片模样如下：
相关代码为：
<svg width="480" height="480" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="svg_2_blur" x="-50%" y="-50%" width="200%" height="200%"> <feGaussianBlur stdDeviation="6"/> </filter> <linearGradient y2="0.8" x2="1" y1="0" x1="0" id="svg_6"> <stop stop-color="#ffffff" offset="0"/> <stop stop-color="#eeeeee" offset="0.45"/> <stop stop-color="#ffffff" offset="0.5"/> <stop stop-color="#eeeeee" offset="0.55"/> <stop stop-color="#ffffff" offset="1"/> </linearGradient> </defs> <g> <title>Layer 1</title> <path fill="#000000" stroke="#000000" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" d="m24.81929,21.20483l-21.20483,214.93975l15.66265,224.09642l220.48192,12.04813l215.66266,-13.25299l15.66263,-219.2771l-15.66257,-220.48191l-219.27718,-12.04819l-211.3253,13.97591l0.00001,-0.00001z" id="svg_2" opacity="0.32" filter="url(#svg_2_blur)"/> <rect id="svg_5" height="448.00001" width="444.99998" y="10" x="13.00002" stroke-opacity="0.8" stroke-linecap="null" stroke-linejoin="null" stroke="#d3d0c9" fill="url(#svg_6)"/> </g></svg>三、SVG总结
如果我们要实现单层的线性渐变或是径向渐变，CSS3当是首选。当我们要实现一些复杂的多层效果的时候，这时显然需要借助于强大的SVG背景了。我们可以在SVG创建编辑器上编辑出我们想要的效果，然后拷贝其生成代码，然后，一切就松松的了。
基本上，photoshop可以创造出来的各种效果，SVG都能实现，这玩意，超强的。可惜，IE6~8浏览器不支持（需要装Chrome框架才可以）。得，可能还要等些时日。
参考文章：A Farewell to CSS3 Gradients
原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=1957
（本篇完）
相关文章CSS渐变图片背景下高度亦自适应按钮 (0.375)基于canvas画布的两个炫酷效果展示 (0.375)PIE使IE支持CSS3圆角盒阴影与渐变渲染 (0.322)拾人牙慧 - CSS3实现Opera浏览器的logo (0.322)CSS3+js实现多彩炫酷旋转圆环时钟效果 (0.322)CSS页面重构“鑫三无准则”之“无图片”准则 (0.322)SVG特征、支持以及一些实际使用问题 (0.322)CSS实现兼容性的渐变、高光等文字效果 (0.303)JavaScript实现最简单的拖拽效果 (0.303)了解：使用CSS namespace进行分隔 (0.303)CSS渐变之CSS3 gradient在Firefox3.6下的使用 (RANDOM - 0.020)