跨浏览器的CSS渐变解决方案

猫性男孩

Webkit大约在两年前推出CSS渐变特性，可惜由于大多数浏览器都对它不是很兼容，这个属性很少被使用。但是现在随着越来越多的浏览器对渐变的支持，我们不必再通过图片来创造渐变的效果了。这篇文章将会告诉你如何通过CSS来创造对于主流浏览器都兼容的渐变：Firefox 3.6+、 Safari、Chrome和IE浏览器。

对于Webkit浏览器

下面代码适用于webkit浏览器如：Safari， Chrome等。它能显示一个从顶部（#ccc）到底部（#000）的渐变。

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

webkit渐变

（译者注：属性形式为：

-webkit-gradient(<type>, <point> [, <radius>]?,  <point> [, <radius>]? [, <stop>]*)

type为渐变类型，可以天linear或者radial（radial gradient即放射渐变，你懂的）。point是一个由空格隔开的点值，特别注意不要写top或者bottom，要写left top这样的点，用百分比或者0~1的数字也是可以的，就跟red和#F00一样。stop是颜色断点，可以设置至少两个，每一个断点格式为

color-stop(0.5, orange)

如果像代码示例那样用from(#000)函数来表示断点，那么是等同于

color-stop(0, #000)

的）

对于Firefox3.6+

background: -moz-linear-gradient(top, #ccc, #000);

moz渐变

（译者注：属性形式为：

-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]*

point和angle参数为可选。需要填至少两个color-stops也就是颜色渐变点。每一个中间颜色点（color-stops）都需要填写一个颜色后面跟随一个百分比数值。如果第一个颜色点没有填写百分比，默认为0%；如果最后一个颜色点没有填写百分比，默认为100%；如果中间的某个颜色点没有填写百分比，则被计算为前一点和后一点的中间百分比。）

对于IE内核浏览器

下面这条filter只会被IE浏览器读取：
filter: progidXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');

IE渐变滤镜

跨浏览器的CSS渐变（demo）

把以上三行代码放在一起就成了我们的跨浏览器CSS渐变。注意：我在代码最上面加了一条背景色代码，这样不兼容渐变特性的用户将会看到背景色。

background: #999; /* for non-css3 browsers */

filter: progidXImageTransform.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渐变demo

CSS渐变下拉菜单

下面是一个纯CSS的渐变下拉菜单，使用CSS3的text-shadow、radius-border，和box-shadow（没有使用Javascript或者图片）

CSS渐变的下拉菜单

IE的局限性

IE的渐变滤镜不支持中间颜色点，不支持自定义渐变角度和放射渐变。这意味着你只能使用指定水平/垂直、线性、并且只有起始和终点两色的渐变。

后记

请注意，不是所有的浏览器都支持CSS渐变。安全起见，你不应该太指望它来布局，只有在“渐进增强”的时候才应该用到它。