浅谈【CSS】渐变背景（background-image）以及基础用法

线性渐变

background-image: linear-gradient( 角度 , 颜色);
线性渐变是最基本的渐变类型。这种渐变在一条直线上从一个颜色过渡到另一个颜色。

####background-image: linear-gradient( #E94E65, #1574A8);

这条直线的方向由角度指定，或者在关键字 to 后面加上 top、bottom、right、left 中的某一个关键字或多个关键字，例如 to bottom left。

background-image: linear-gradient( to right, #E94E65, #1574A8);

这样渐变是从元素左边的红色过度到右边的蓝色
如果渐变是从元素上边的紫色过度到下边的绿色，要使用 to bottom 关键字。

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

另外，还可以用 to bottom right 这样的关键字指定渐变的角度。使渐变从元素的左上角开始，到元素的右下角结束。
bac

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

径向渐变

background-image: radial-gradient();

径向渐变就是沿着圆周或者椭圆周向外扩散的渐变。

background-image: radial-gradient( #E94E65, #1574A8);

述代码会在元素的显示范围内创建一个椭圆形，把渐变的中心点（红色）放在元素的中心上。

我们还可以在颜色值前面加上 circle 关键字，创建圆形的渐变。

background-image: radial-gradient( circle, #E94E65, #1574A8);

设置径向渐变的中心点

可以用关键字 at 后面加上 background-position 属性支持的定位关键字和数值，指定渐变中心的位置,设置在元素的左上方（20% 20%）

background-image: radial-gradient( circle at 20% 20%, #E94E65, #1574A8);

closest-side：告诉浏览器从中心点向外扩展渐变，到离中心点最近的一边结束。

background-image: radial-gradient(closest-side at 20% 20%, #E94E65, #1574A8);

background-image还有很多玩法 剩下的我就不展示了，把方法写在这里。
arthest-corner：以离渐变中心点最远的顶角计算圆的半径
losest-corner：以离渐变中心点最近的元素顶角计算渐变的范围。
farthest-side：以离渐变中心点最远的那一边计算圆的半径。