Webkit 介绍 CSS 渐变特性差不多有两年时间了，但由于与大部分浏览器不兼容的原因，很少实际应用。值得欣慰的是 Firefox 3.6 + 已经支持 CSS 渐变，我们可以通过样式呈现渐变效果，而不必创建一个渐变图像。这篇文章将告诉你如何书写 CSS 渐变代码使其兼容主流浏览器：IE，Firefox 3.6 +，Safari 和 Chromr。此外，尝试更新使用了 CSS 渐变的下拉菜单演示。

Webkit 引擎

以下代码适用于 webkit 引擎的浏览器，如 Safari，Chrome 等。它会从顶部 (#ccc) 到底部 (#000) 呈现一个线性渐变。

background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));

Firefox 3.6+

background: -moz-linear-gradient(top,  #ccc,  #000);

Internet Explorer

以下的滤镜代码只能被 IE 解释执行：

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');

跨浏览器 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 渐变下拉菜单

以下是一个使用 CSS3 文字阴影 (text-shadow)，圆角 (radius-border)，阴影 (box-shadow) 的纯 CSS 渐变下拉菜单，未涉及任何 JavaScript 或 图片。

Internet Explorer 的局限性

IE 的渐变滤镜不支持多重渐变 (color-stop)，渐变角度 (gradient angle)，径向渐变 (radial gradient)。这意味着你只能使用 StartColorStr 和 EndColorStr 两种颜色指定水平或垂直的线性渐变。

结束语

请注意并不是所有浏览器都支持 CSS 渐变属性。为保证安全，在编码页面布局时不要依赖于 CSS 渐变，它只适合用来加强样式表现。