CSS3 gradient 背景颜色渐变效果实现

CSS3发布很久了，现在在国外的一些页面上常能看到他的身影，这让我羡慕已久，只可惜在国内为了兼容IE，让这一项技术受到很大的限制，很多Web前端人员都望而止步。虽然如此但还是有很多朋友在钻研CSS3在web中的应用，为了不被淘汰，我也开始向CSS3进发，争取跟上技术的前沿。从现在开始我会不断的发布一些CSS3的应用，和大家一起分享，今天我们首先要看的就是:CSS3： Gradient─CSS3渐变。

CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。而我们今天主要是针对线性渐变来剖析其具体的用法。为了更好的应用CSS3 Gradient,我们需要先了解一下目前的几种现代浏览器的内核，主流内容主要有Mozilla（Gecko）（熟悉的有Firefox，Flock等浏览器）、WebKit（熟悉的有Safari、Chrome等浏览器）、Opera(presto)（Opera浏览器）、Trident（讨厌的IE浏览器）。本文照常忽略IE不管，我们主要看看在Mozilla、Webkit、Opera下的应用，当然在IE下也可以实现，主要通过IE特有的滤镜来实现。

线性渐变示例代码（兼容各主流浏览器）：

background: -moz-linear-gradient(top, #ffffff 0%, #edeff0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#edeff0));
background: -webkit-linear-gradient(top, #ffffff 0%,#edeff0 100%);
background: -o-linear-gradient(top, #ffffff 0%,#edeff0 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#edeff0 100%);
background: linear-gradient(to bottom, #ffffff 0%,#edeff0 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#edeff0',GradientType=0);    

参数：
第一个参数表示线性渐变的方向，top是从上到下、left是从左到右，如果定义成left top，那就是从左上角到右下角。第二个和第四个参数分别是起点颜色和终点颜色。0为缺省值，表示垂直渐变，1表示水平渐变。你还可以在它们之间插入更多的参数，表示多种颜色的渐变。