一、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起始颜色，终止颜色。