CSS渐变大约两年被Webkit浏览器引进，但是由于和大多数浏览器不兼容而很少使用。现在Firefox 3.6+开始支持CSS渐变，我们可以用样式创建渐变而无须使用图片。本文将介绍如何使用CSS创建支持主流浏览器的渐变：IE, Firefox 3.6+, Safari, Chrome。
针对Webkit核心浏览器
下面的代码支持webkit核心的浏览器，如Safari、Chrome等，它将显示一个从顶部（#CCC）到底端(#000)的线性渐变。[css]
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));
[/css]
[caption id="attachment_61" align="aligncenter" width="480" caption="Webkit CSS 3渐变参数说明"]
[/caption]
针对Firefox 3.6+
[css] background: -moz-linear-gradient(top, #ccc, #000); [/css][caption id="attachment_60" align="aligncenter" width="480" caption="Firefox CSS渐变参数说明"]
[/caption]
针对Internet Explorer
下面的滤镜仅能被IE浏览器识别：[css]
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');
[/css]
[caption id="attachment_59" align="aligncenter" width="480" caption="IE渐变滤镜参数说明"]
[/caption]
CSS渐变跨浏览器显示(演示)
把下面的三行代码放在一起，将实现一个跨浏览器的渐变框。注意：最上面为不支持这个功能的浏览器添加了一个背景色。[css]
background: #999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE /
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); / for webkit browsers /
background: -moz-linear-gradient(top, #ccc, #000); / for firefox 3.6+ */
[/css]
[caption id="attachment_57" align="aligncenter" width="480" caption="CSS渐变跨浏览器实现"]
[/caption]
CSS渐变下拉菜单(演示)
下面是一个纯CSS渐变下拉菜单，使用CSS 3 text-shadow、radius-border、box-shadow，没有任何脚本和图片。[caption id="attachment_58" align="aligncenter" width="480" caption="CSS3渐变圆角阴影下拉菜单"]
[/caption]
Internet Explorer Limitations
Internet Explorer渐变滤镜不支持颜色过渡点、渐变角度及放射状渐变，这意味着在IE中仅仅能使用初识、结束两个颜色实现水平或垂直的渐变。善意提醒
请注意并不是所有浏览器都支持CSS渐变，为安全起见，不应该在编写布局代码的时候依赖CSS渐变。它仅用来增强布局。译者注
各大浏览器CSS渐变支持官方文档：
| Browser | Lowest version | Support of |
|---|---|---|
| Internet Explorer | 5.5 (including 8.0) | filter: progid:DXImageTransform.Microsoft.Gradient()
MSDN library, gradient filter |
| Firefox (Gecko) | 3.6 (1.9.2) | -moz-linear-gradient() |
| Opera | --- | --- |
| Safari (WebKit) | 4.0 (528) | -webkit-gradient(linear,…)
Safari Reference Library, gradients |
