/ CSS

CSS 3渐变跨浏览器实现

CSS渐变大约两年被Webkit浏览器引进,但是由于和大多数浏览器不兼容而很少使用。现在Firefox 3.6+开始支持CSS渐变,我们可以用样式创建渐变而无须使用图片。本文将介绍如何使用CSS创建支持主流浏览器的渐变:IE, Firefox 3.6+, Safari, Chrome。

针对Webkit核心浏览器

下面的代码支持webkit核心的浏览器,如Safari、Chrome等,它将显示一个从顶部(#CCC)到底端(#000)的线性渐变。

[css]
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));
[/css]

[caption id="attachment_61" align="aligncenter" width="480" caption="Webkit CSS 3渐变参数说明"]Webkit CSS 3渐变参数说明[/caption]

针对Firefox 3.6+

[css] background: -moz-linear-gradient(top, #ccc, #000); [/css]

[caption id="attachment_60" align="aligncenter" width="480" caption="Firefox CSS渐变参数说明"]Firefox CSS渐变参数说明[/caption]

针对Internet Explorer

下面的滤镜仅能被IE浏览器识别:

[css]
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');
[/css]

[caption id="attachment_59" align="aligncenter" width="480" caption="IE渐变滤镜参数说明"]IE渐变滤镜参数说明[/caption]

CSS渐变跨浏览器显示(演示)

把下面的三行代码放在一起,将实现一个跨浏览器的渐变框。注意:最上面为不支持这个功能的浏览器添加了一个背景色。

[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]

[caption id="attachment_57" align="aligncenter" width="480" caption="CSS渐变跨浏览器实现"]CSS渐变跨浏览器实现[/caption]

CSS渐变下拉菜单(演示)

下面是一个纯CSS渐变下拉菜单,使用CSS 3 text-shadow、radius-border、box-shadow,没有任何脚本和图片。

[caption id="attachment_58" align="aligncenter" width="480" caption="CSS3渐变圆角阴影下拉菜单"]CSS3渐变圆角阴影下拉菜单[/caption]

Internet Explorer Limitations

Internet Explorer渐变滤镜不支持颜色过渡点、渐变角度及放射状渐变,这意味着在IE中仅仅能使用初识、结束两个颜色实现水平或垂直的渐变。

善意提醒

请注意并不是所有浏览器都支持CSS渐变,为安全起见,不应该在编写布局代码的时候依赖CSS渐变。它仅用来增强布局。

译者注

各大浏览器CSS渐变支持官方文档:

Browser Lowest version Support of
Internet Explorer 5.5 (including 8.0) filter: progid:DXImageTransform.Microsoft.Gradient() MSDN library, gradient filter
Firefox (Gecko) 3.6 (1.9.2) -moz-linear-gradient()
Opera --- ---
Safari (WebKit) 4.0 (528) -webkit-gradient(linear,) Safari Reference Library, gradients