渐变

渐变：渐变指的是颜色的渐变，从一个颜色慢慢过渡到另一个颜色。渐变分两种，一种是沿着一条直线发生渐变，另一种围绕一个圆心发生渐变。

线性渐变

 

语法：

 

```css
background-image: linear-gradient(to 上/下/左/右, 颜色, 颜色, ....);    方向可以是左上，右下。。。也可以是一个角度deg，方向是可选项 
background-image: repeating-linear-gradient(to 上/下/左/右, 颜色 百分比, 颜色 百分比, ....);    表示0~20%，20%~40% .. 其余不满100%的重复渐变 

 

 

径向渐变：

 语法：

background-image: radial-gradient(颜色, 颜色);      默认圆心为div中心，默认形状为椭圆 
background-image: radial-gradient(形状, 颜色, 颜色);     circle表示圆形，ellipse表示椭圆 
background-image: radial-gradient(at x y, 颜色, 颜色);     x和y是圆心的x和y 
background-image: radial-gradient(形状 at x y, 颜色, 颜色);    x和y是圆心的x和y 
background-image: radial-gradient(范围 形状 at x y, 颜色, 颜色);    大小用几个关键字表示 

说明：
最近的边作为大小：closest-side
最近的角：closest-corner
最远的边：farthest-side
最远的角：farthest-corner

background-image: repeating-radial-gradient(颜色 百分比, 颜色 百分比);      默认圆心为div中心，默认形状为椭圆