说明：用线性渐变创建图像

语法：

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

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

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

取值：

下述值用来表示渐变的方向，可以使用角度或者关键字来设置：

<angle>：用角度值指定渐变的方向（或角度）。

to left：设置渐变为从右到左。相当于: 270deg

to right：设置渐变从左到右。相当于: 90deg

to top：设置渐变从下到上。相当于: 0deg

to bottom：设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。

<color-stop>：用于指定渐变的起止颜色：

<color>：指定颜色。

<length>：用长度值指定起止色位置。不允许负值

<percentage>：用百分比指定起止色位置。

其他知识点：

不知你是否注意到“第一个”语法后面的“+”号没，这些符号（“?”、“+”、“*”）其实用法跟正则表达式很像，如果正则表达式不知道的请看下面正解：

　　,：代表每个属性之间的分隔符号。

　　?：代表“属性”可以出现零次或一次，也就是可有可无

　　+：代表“属性”可以出现一次或多次，但是必须出现一次

　　*：代表“属性”可以出现零次或多次。

　　|：代表可以从多个“属性”中任选一个。

　　||：代表“属性”可以是左边的一个或是右边的一个，或是两个都行

　　[]：代表里面是“属性”或“属性”集合

　　<>：这个不是正则表达式里面的，但是它代表定义的取值范围，如上语法的“<angle>”，取值的里面就会附带说明这个“<angle>”是干嘛的

　　{1,4}：代表“属性”最少出现一次，最多出现四次。“1”和“4”都是动态的值，不是固定的，根据描述而定

来看看基本用法实例：

　　(图1)

　　linear-gradient(#fff, #333);

　　linear-gradient(to bottom, #fff, #333);

　　linear-gradient(to top, #333, #fff);

　　linear-gradient(180deg, #fff, #333);

　　linear-gradient(to bottom, #fff 0%, #333 100%);

　　以上这五句样式都可以实现（图1）的渐变效果

再来看看复杂点的普通实例：

效果图：

再让我们看看“高能”的用法：

效果图：

怎么样，效果是不是很酷炫？再瞧瞧其他的：

还有更多好看的就不展示了，源自国外大牛：

其中的几个重要知识点总结：

■Ⅰ.“background”的绘制顺序是从后面的开始向前面的绘制的，百说不如一栗：

1 background: linear-gradient(45deg, #dca 12%, transparent 0, transparent 88%, #dca 0),linear-gradient(135deg, transparent 37%, #a85 0, #a85 63%, transparent 0),linear-gradient(45deg, transparent 37%, #dca 0, #dca 63%, transparent 0) #753;background-size: 25px 25px;