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

原文地址:这里

posted @ 2011-09-28 17:26  漂在前端  Views(549)  Comments(0Edit  收藏  举报