渐变是多个颜色逐渐变化的效果，一般用于设置盒子模型

线性渐变

属性：background-image : linear-gradient(

渐变方向

颜色1 终点位置,

颜色2 终点位置,

......）；

 取值:

渐变方向:可选

• to 方位名词
• 角度度数

终点位置:可选

• 百分比

    div {width: 250px;height: 250px;background-color: aqua;background-image: linear-gradient(rgb(36, 151, 227) 80%,red);}

 径向渐变

属性：

background-image: radial-gradient(

半径 at 圆心位置,

颜色1 终点位置,

颜色2 终点位置,

......

);

 取值

• 半径可以是两条，则为椭圆型的渐变
• 圆心位置取值：像素单位数值/百分比/方位名词

    div {width: 200px;height: 200px;background-color: aqua;border-radius: 50%;background-image: radial-gradient(100px at center center,red,blue);}