1.什么是渐变
渐变指定是多种颜色平缓变换的一种显示效果。
2.渐变的主要因素
1.色标：一种颜色及其出现的位置
2.一个渐变是由多个色标组成（至少两个）
3.渐变分类
1.线性渐变
以直线的方向来填充效果
2.径向渐变
以圆形的方式来实现填充
3.重复渐变
将线性渐变或径向渐变 重复几次实现填充
4.渐变详解
1.线性渐变
属性：background-image
取值：linear-gradient(angle,color-point1,color-point2,....);
1.angle
表示渐变填充的方向或角度
取值：
1.关键字
to top 从下向上填充渐变色
to bottom 从上向下填充渐变色
to left 从右向左填充渐变色
to right 从左向右填充渐变色
2.角度值
0deg 从下向上填充，等同于to top
90deg 从左向右填充，等同于to right
180deg 从上到下填充，等同于to bottom
270deg 从右向左填充，等同于to left
2.color-point
色标：颜色 及其 位置
取值：颜色 以及 位置的组合，中间用空格分开
ex:
1.red 0%
在填充方向的开始位置处颜色为红色
2.green 50%
到填充方向一半的位置处，颜色变为绿色
3.blue 200px
到填充方向的200px的位置处，颜色变为蓝色
2.径向渐变
属性：
background-image:radial-gradient([size at position],
color-point1,...);
size at position:
size:半径，以px为单位的数值
position:圆心所在位置
1.x y 具体数值
2.x% y% 元素宽和高的占比
3.关键字
x:left,center,right
y:top,bottom
ex：
100px at right top
半径 右上角位置
3.重复渐变
1.重复线性渐变
background-image:repeating-linear-gradient
(angle,...);
color-point:位置一定要给绝对数值（px）,不要用相对单位%
2.重复径向渐变
background-image:repeating-radial-gradient
([size at position],...);
