跨浏览器CSS3渐变色

跨浏览器CSS3渐变色

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渐变进行编码布局。它应该只用于加强布局。