放射性渐变

径向渐变：
语法： background-image：radial-gradient
径向渐变
[size at position] : 径向渐变的半径 以及 圆心的位置
size 半径 position 圆心的位置
（x，y的坐标）
百分比
关键字 top bottom left right center

使用radial-gradient()函数创建放射性渐变
第一个参数 circle 表示圆形渐变 这个放射性渐变其圆心，然后逐渐过渡到圆周的两种及以上两种以上的颜色平滑过渡的过程
background: radial-gradient(circle, white, lightblue);

如果使用 ellipse 表示把渐变拉伸成椭圆形： background: radial-gradient(ellipse, white, lightblue);
设置渐变的中心位置
下面使用 at 关键字告诉浏览器开始的位置离在什么地方 如下示例
background: radial-gradient(circle at 70% 30%, white, lightblue);
同线性渐变一样我们可以设置多个渐变颜色,也可以控制渐变颜色的起点

循环渐变

linear-gradient() 和 radial-gradient() 只能将设置的颜色渐变一次。
而 repeating-linear-gradient() 和 repeating-radial-gradient() 会以相同的颜色顺序进行不断地循环，直到颜色条纹填满元素。

循环渐变函数语法基本上与普通渐变一样。唯一不同的是，我们需要确保限制了渐变的大小（即最后一个颜色包含一个百分比或像素值），以便其可以循环。
也可以使用百分比限制渐变大小

（2）使用固定像素值限制渐变大小
下面样例不管容器大小如何变化，每个条纹都有固定一样的宽度（30px）
background: repeating-linear-gradient(left, white, lightblue 30px);
使用 background-image 属性，可以创建背景图片作为后备。
（当然对于支持渐变的浏览器也是很聪明的，它不会下载后备图片。）