本文主要内容：
线性渐变概括
线性渐变语法与参数
线性渐变的基本用法
多色线性渐变
1.线性渐变概括
如果有使用过PS的各位想必对PS的渐变操作有所了解，渐变由两种颜色或多种颜色之间的平滑过渡，如PS中的渐变操作：
在线性渐变的过程中，颜色会沿着任意轴过渡，不管从顶部到底部还是从左到右，甚至某个角度开始，都可以实现。最早支持线性渐变的是以-webkit-为前缀的浏览器，后面才在众多浏览器上普及，但是那时候众多浏览器并没有统一的标准，用法差异很大，如今，所有的现代浏览器都支持W3C给出的线性属性的标准语法。
2.线性渐变语法与参数
线性渐变的语法较之其它的CSS3语法相对复杂的多，本文以W3C为标准的语法介绍CSS3的线性渐变。
标准线性渐变语法
<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+) 参数说明： <angle> = [deg] <side-or-corner> = [left | right] || [top | bottom] <color-stop> = <color> [ <length> | <percentage> ]?
第一个参数:
指定了渐变的方向，同时决定了渐变颜色的停止位置。这个参数值可以省略，当省略不写的时候其取值为“to bottom”。
下述值用来表示渐变的方向，可以使用角度或者关键字来设置：
angle：用角度值指定渐变的方向（或角度）。
to left：设置渐变为从右到左。相当于: 270deg
to right：设置渐变从左到右。相当于: 90deg
to top：设置渐变从下到上。相当于: 0deg
to bottom：设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。
第二个参数：
color-stop 用于指定渐变的起止颜色。
color：指定颜色。
length：用长度值指定起止色位置。不允许负值
percentage：用百分比指定起止色位置。
3.线性渐变的基本用法
3.1 从底部向顶部渐变
制作从底部到顶部直线渐变最简单的方法直接使用“to top”关键词。表示第一颜色向第二颜色渐变,下同。实现类似于“to top”效果还可以使用角度值“0deg”、“360deg”和“-360deg”。
.div {
width: 400px;
height: 200px;
border: 1px solid #000;
margin-bottom: 10px;
}
.gradient {
background: linear-gradient(to top,#39f,#fff);
}效果如下：
3.2从右向左渐变
“to left”关键词实现了从右向左颜色渐变，“to left”实现的效果也可以使用角值“-90deg”和“270deg”；
.gradient {
background: linear-gradient(to left,#39f,#fff);
}效果如下：
3.3 从左下角到右上角
“to top right”关键词实现左下角到右上角的线性渐变。也就是第一颜色从左下角向右上角第二颜色渐变。
background: linear-gradient(to top right,#39f,#fff);
效果如下：
3.4 色标
这个例子指定三个色标:
background: linear-gradient(to bottom, blue, white 80%, green);
需要注意的是第一个和最后一个色标并没有指定一个位置; 由于这个原因， 位置值0％和100%将分别自动的分配给第一个和最后一个色标 。中间的色标指定一个80%的位置, 把剩下的部分留给底部。
效果如下：
4.多色线性渐变
前面向大家演示的效果仅是一些简单的线性渐变（两色渐变），其实在实际中，渐变不仅仅是只有两种颜色，会有多色。接下来，我们一起来看一个从右向左的五彩渐变。
background:-webkit-linear-gradient(right, red, orange, yellow, green, blue, indigo, violet); background:linear-gradient(right, red, orange, yellow, green, blue, indigo, violet);
由代码可知，我们只要设置好了渐变位置，剩下的就可以随意设置颜色了。
效果如下：
小结
在本篇文章的案例中，效果的位置并不是一成不变的，可以在angle中设置看到更多的渐变效果。同时在实际开发中，为了避免遇到的兼容问题，大家在开发中最好加上内核前缀避免兼容问题。
