CSS线性渐变

渐变背景不是背景颜色，而是图片我们需要通过background-image或者通过background简写来设置渐变的效果
渐变分别有：

linear-gradient()线性渐变

语法如下

 background-image: linear-gradient(red, yellow)

线性渐变默认是自上向下进行变化
我们可以通过关键字来指定渐变的方向

to top	向上渐变
to right	向右渐变
to bottom	向下渐变
to left	向左渐变

代码演示如下

 background-image: linear-gradient(to left, red, yellow); 

默认情况下，渐变的颜色在元素中是平均分布的 我们也可以设置px 或者deg 来改变分布
代码演示如下

   background-image: linear-gradient(90deg, red, yellow, blue);

            background-image: linear-gradient(to left, red 0px, yellow 100px);

重复线性渐变
语法如下

background-image: repeating-linear-gradient(red 20px, yellow 40px)

设置径向渐变

语法如下

background-image: radial-gradient();

代码演示

            background-image: radial-gradient(red, yellow, blue);

可以在开头指定渐变的形状：
circle圆形
ellipse随圆形
也可以通过 半径来指定元素的大小

代码演示

background-image: radial-gradient(100px 200px, red, yellow, blue)

通过at 来指定圆心的位置

代码演示

            background-image: radial-gradient(at top, red, yellow, blue);