一、background: linear-gradient(0deg, black, transparent 100%)——线性渐变
第一个值指明渐变方向，0deg是由下向上渐变，90deg是由左向右渐变，180deg有上向下渐变，270deg是由右向左渐变；也可用to+方位表示，如 to top=0deg,to right=90deg,to bottom=180deg,to bottom=270deg.
第二个值是起始颜色，中间可以指定多种颜色，最后是终止颜色；
Webkit引擎（Chrome和Safari），Genko引擎（Firefox），Presto引擎（Opera），Trident引擎（IE）的私有语法和和W3C的标准语法非常像。区别如下：
- 需要加上前缀，分别是-webkit-，-moz-，-ms-
- -webkit-，-ms-的第一个参数的关键字表示起始位置，因此不需要加to。例如-webkit-linear-gradient(top, #fff, #000);等价于W3C标准语法的linear-gradient(to bottom, #fff, #000);
- -moz-的第一个参数的关键字可以可不加to。不加to表示起始位置，加to表示终止位置。例如-moz-linear-gradient(top, #fff, #000);等价于-moz-linear-gradient(to bottom, #fff, #000);
- IE10以下是不支持渐变的…因此没有私有语法
- Opera从37开始支持，试了下并没有私有语法，加上-o-前缀反而不认…
我们还可以在颜色后面添加百分比%，用来表示多大范围内有什么颜色渐变，例如linear-gradient(to bottom, yellow 0%, #9C117A 20%, #EF137A 80%, #f00 100%);。第一个颜色渐变范围0-20%，第二个颜色渐变范围20-80%，第三个颜色渐变范围80-100%，第四个颜色渐变范围100-100%渐变，等于第四个颜色没有渐变。
二、background:radial-gradient(shape size at position, start-color, last-color)——径向渐变
1、shape ：确定圆的类型，ellipse (默认): 指定椭圆形的径向渐变，
circle ：指定正圆形的径向渐变；
2、size ：定义渐变的大小，可能值：
- farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
- closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边
- closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角
- farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边
3、position 定义渐变的位置。可能值：
- center（默认）： 设置中间为径向渐变圆心的纵坐标值。 <
- top： 设置顶部为径向渐变圆心的纵坐标值。 li> bottom： 设置底部为径向渐变圆心的纵坐标值。
4、start-color, last-color起始颜色，终止颜色。