CSS3 颜色渐变 gradient

在颜色渐变的大军中，主要有两类。一种是线性渐变

linear-gradient

，另外一种是径向渐变

radial-gradient

，在这之中不同的浏览器有不同的前缀，就不再介绍前缀了，除去前缀，使用方法基本是一致的，在这里我们先介绍

linear-gradient

。

linear-gradient

syntax

linear-gradient( [ < angle > | to < side-or-corner > ,]? < color-stop > [, < color-stop >]+ )

side-or-corner = [left | right] || [top | bottom]

color-stop = < color > [ < percentage > | < length > ]?

注：在以前的时候，webkit是使用

-webkit-gradiant

来表示渐变的，现在改为使用上面的方式，但是旧版的依旧可以使用，关于旧版的使用方法，将在以后介绍。

description

首先，第一个参数是一个可有可无的参数，这个参数表明了渐变的方向，可以用角度以及描述的形式。例如：

30deg

left [center]

right bottom

都是合法的表述，这个要求left不能和right在一起，bottom不能和top在一起，并且如果只使用一个left，是可以省略center这个的单词的。

注明：不同的写法0deg的位置不同，不加前缀的linear-gradient是以底部为0deg，而添加前缀的linear-gradient是以左侧为linear-gradient

第二个参数以及之后的参数就是颜色的信息，默认是自动均匀分布。

例如：

linear-gradient(right,black,white);
linear-gradient(right,black,blue,green,red);

上面的那个例子中，第一个创建了两个颜色的渐变，从右向左，从黑色到白色。而第二个例子创建了4个颜色的渐变，从右向左，从黑色，到蓝色，再到绿色，再到红色，颜色均匀分布。

那么接下来，我们如果希望不均匀分布怎么办？

从syntax中可以看到，在每个颜色值后面还可以跟一个百分数或者长度。所以我们可以这样写

linear-gradient(top,red,green 10%,blue)
linear-gradient(top,red 50%,green)
linear-gradient(top,red 50%,green 50%)

至此

linear-gradient

基本功能暂时讲解完毕，大家可以试着使用一下。以后会不断添加新的内容。

radial-gradient

以后补充