渐变：通过渐变可以设置一些复杂的背景颜色，可以从实现一个颜色向其他颜色过渡的效果
渐变是图片，通过 background-image设置
一、渐变色
可选值
1： linear-gradient ['ɡreidiənt]，线性渐变，颜色沿着一条直线发生变化
语法：linear-gradient(方位,颜色1,颜色2)
参数1:表示方位，（可选值，不写默认是to bottom）
(1)to left，to right, to bottom, to top
(2)xxxdeg 表示角度，度数，会更灵活
(3)turn 表示圈 .5turn
参数2:颜色1
参数3:颜色2
注意：可以写多个颜色，默认情况下，颜色是均分占比的，也可以手动的指定渐变的分布情况，例如：background-image:linear-gradient(red 50px,yellow) ，颜色后直接跟占比
2:repeating-linear-gradient() 可以平铺的线性渐变
background-image: repeating-linear-gradient(yellow 0px, red 50px);
参数跟linear-gradient是一样的
参数2-参数1，中间部分是渐变的颜色，拿总高度/差值，就是颜色重复出现的次数
二、放射渐变 —经向渐变（放射性的效果）
radial-gradient() ['reidiəl] ['ɡreidiənt]
语法：background-image: radial-gradient();
默认情况下，圆心是根据元素的形状来计算的
正方形-->圆形
长方形-->椭圆型
参数1:圆心的形状
（1）circle圆形，ellipse椭圆，
（2）设置的大小 at 位置==>像素1 像素2 at 0px 0px
参数2:颜色1
参数3:颜色2
······
三、代码演示
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box1 {width: 200px;height: 200px;/* background-image:linear-gradient( red,yellow) ; */background-image: repeating-linear-gradient(yellow 0px, red 100px);background-image: radial-gradient(100px 100px at 100px 0px,red,yellow);}</style></head><body><div class="box1"></div></body></html>
