CSS的渐变特征介绍了WebKit的约两年前，但由于很少使用与大多数布尔斯互不兼容。但现在的Firefox 3.6 +，支持渐变，我们可以创造风格，而不必创建一个图像渐变。这个职位将告诉你如何为CSS代码渐变要由主要浏览器：IE浏览器，火狐3.6 +，Safari和Chrome的支持。此外，还有我的下拉菜单（demo）使用CSS渐变。
对于WebKit的浏览器
下面的代码top (#ccc) to bottom (#000).它会显示一个线性渐变如Safari，Chrome等WebKit的浏览器background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));
For Firefox 3.6+
background: -moz-linear-gradient(top, #ccc, #000);
For Internet Explorer
The following filter wlil only be read by 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文字阴影，半径，边界，阴影（没有Javascript或图片，纯CSS制作）
互联网浏览器的限制
Internet Explorer的渐变过滤器不支持颜色一站式，倾斜角度，径向渐变。这意味着你只能指定2颜色：StartColorStr和EndColorStr水平或垂直线性渐变。
结束语
请注意：并非所有的浏览器支持CSS渐变。为了安全起见，你不应该依靠CSS渐变进行编码布局。它应该只用于加强布局。