CSS渐变代码制作下拉菜单_div+css教程_H5之家 - 中国HTML5教程资源分享第一站

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 渐变，它只适合用来加强样式表现。