1.background-img渐变

  1.1线性渐变

      background-image:linear-gradient(这种渐变在一条直线上从一个颜色过渡到另一个颜色)。

　  取值：在关键字 to 后面加上 top、bottom、right、left 中的某一个关键字或多个关键字，例如 to bottom left

    

例如：

body {
    background-image: linear-gradient(to right , #7A88FF, #7AFFAF);
}

如果渐变是从元素上边的紫色过度到下边的绿色，要使用 to bottom 关键字

body {
    background-image: linear-gradient(to bottom , #7A88FF, #7AFFAF);
}
还可以用 to bottom right 这样的关键字指定渐变的角度。使渐变从元素的左上角开始，到元素的右下角结束。

body {
    background-image: linear-gradient(to bottom right, #7A88FF, #7AFFAF);
}

角度值的写法：
在0~360之间的数字后面加上deg，指定过渡在哪个方向结束。

也就是说，
background-image: linear-gradient(to top, #7A88FF, #7AFFAF);
等价于：
background-image:linear-gradient(0deg, #7A88FF, #7AFFAF);
background-image: linear-gradient(to top, #7A88FF, #7AFFAF)等价于background-image:linear-gradient(0deg, #7A88FF, #7AFFAF); 关于角度取值如下：

 

 

角度的值按顺时针方向旋转，因此，90deg 表示元素的右边（与 to right 相同），180deg 表示元素的底边（与 to bottom 相同），270deg 表示元素的左边（与 to left 相同）。 使用多色渐变时，第一个颜色和最后一个颜色无需指定位置，因为浏览器会默认第一个颜色从0%的位置开始，最后一个颜色在100%的位置结束。   1.2 平铺线性渐变   background-image:repeating-linear-gradient() 平铺的线性渐变其实就是在普通的渐变基础上多了一个重复的效果。  1.3 径向渐变就是沿着圆周或者椭圆周向外扩散的渐变。  background-image:radial-gradient()  圆形渐变

body {
   background-image: radial-gradient(circle,#99CCCC, #7171B7);
}

设置径向渐变的中心点
可以用关键字 at 后面加上 background-position 属性支持的定位关键字和数值，指定渐变中心的位置
closest-side：告诉浏览器从中心点向外扩展渐变，到离中心点最近的一边结束。
closest-corner：以离渐变中心点最近的元素顶角计算渐变的范围。
farthest-side：以离渐变中心点最远的那一边计算圆的半径。
farthest-corner：以离渐变中心点最远的顶角计算圆的半径。

1.4平铺的径向渐变
跟平铺的线性渐变原理相同
例如：

body {
    background-image: repeating-radial-gradient(circle at 20% 40%,#99CCCC 20px, #7171B7 40px, #CCCC99 60px, #4F9C9C 80px, #99CCCC 100px);
}

注：
为了让平铺的径向渐变看起来比较流畅，结束颜色应该与起始颜色相同。这样能让颜色自然地回归最初的颜色。
再注：因为Web浏览器会把线性渐变和径向渐变当成背景图，所以可以使用控制背景图的其他属性，比如background-size、background-position等