渐变就是从一个颜色过渡到另一个颜色，以创建平滑的渐变效果。渐变可以应用与任何使用北京图片的地方，这意味着在CSS样式中，渐变可以相当于背景图。另外，渐变为CSS3的新属性所以我们需要给代码里面加内核前缀，以兼容不同的设备，以下我拿webkit内核来写。渐变分为线性渐变(linear-gradient)和径向渐变(radial-gradient).

分别为以下样式：

线性渐变	径向渐变

我们可以看到这两张图分别都是由红色渐变到黄色再到蓝色，我们现在先来说一下线性渐变。

线性渐变(linear-gradient)：

我们先上一段代码 background:-webkit-linear-gradient(left,red 100px,yellow 140px,blue 160px);

这段代码是线性渐变的写法，我们来分析一下，

background:linear-gradient(); 渐变语法

参数：

left(参数一)：

方向，可以写为度数例如：

background:-webkit-linear-gradient(-30deg,red 100px,yellow 140px,blue 160px);或

background:-webkit-linear-gradient(left top,red 100px,yellow 140px,blue 160px);

red 100px;(参数二)：

渐变起始颜色与渐变距离。

yellow 140px;(参数三)：

渐变过渡颜色与渐变距离。

.......

blue Npx;(参数N)：

渐变结束颜色与渐变距离。

大家在这可以分析出来：

1、渐变少需要3个参数 方向、起始颜色、结束颜色。

2、渐变起始颜色至结束颜色之间可以添加任意多个参数，每个参数就是前一个参数渐 变到本参数。

另外还有需要一提的是每个渐变距离都是根据方向为起点来计算的，比如：

background:-webkit-linear-gradient(left,red 100px,yellow 140px,blue 160px);

这段代码的参数二是起始位置，有100px的红色区域，而参数三是渐变区域他有140px的黄色区域，但我们看到的却没有140px,而是在100px到140px的区域为红色到黄色渐变颜色展示，参数四是结束颜色，也就是说在140px到160px之间为黄色到蓝色之间渐变展示，160px之后都由参数四的蓝颜色来展示。这样我们可以得到一个结论就是：他们的渐变距离都是以同一个起点来渐变，只是距离来决定渐变区域的展示效果而已。

径向渐变(radial-gradient)：

径向渐变代码如下：

background：-webkit-radial-gradient(200px 200px ,red,yellow,blue);

这样大家可能不是很理解，如果我告诉大家这段代码是给一个宽高各400px的div加上的样式从而实现上图的效果，这样应该就很容易理解了。

相信大家已经理解，没错，这段代码的参数一就是渐变的起始位置，而后面的颜色分别由第一个颜色向第二个颜色渐变，第二个颜色向第三个颜色渐变以此类推。

当然，这只是个简单的默认渐变，我们还可以控制渐变的大小、渐变的形状等等。代码如下：

background:-webkit-radial-gradient(center,shape,size,start-color,......,last-color);

center：渐变的起始位置，可以为百分比，可以为具体数值，默认为正中心。

shape：渐变的形状，ellipse表示椭圆形，circle表示圆形。默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样。

size：渐变的大小，即渐变到哪里停止，它有四个值。closest-side：近边; farthest-side：远边; closest-corner：近角; farthest-corner：远角。

以上为线性渐变与径向渐变的浅析介绍，真正的渐变多样性还需要大家在练习的时候自行测试。这样才能在真正用到的时候使用的得心应手。