武林网(www.vevb.com)文章简介：这篇文章将告诉你如何书写 CSS 渐变代码使其兼容主流浏览器：IE，Firefox 3.6 +，Safari 和 Chromr。此外，尝试更新使用了 CSS 渐变的下拉菜单演示。
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 渐变，它只适合用来加强样式表现。
新闻热点
疑难解答
