渐变

1.什么是渐变
渐变指的是多种颜色平缓变化的一种显示效果。
2渐变分别分为两种
1.线性渐变
2.径向渐变
线性渐变：以直线的方向来填充颜色

属性：background-image
取值：linear-gradient(angle,color-point1,color-point2…)

angle:表示渐变的填充方向或角度
取值：
to top 从下向上的填充—— 0deg 等同于to top
to bottom 从上到下的填充——180deg 等同于to bottom
to left 从右向左填充—— 270deg 等同于to left
to right 从左向右填充—— 90deg 等同于to right

color-point:色标，颜色及其位置
取值：颜色 以及 位置的组合，之间用空格隔开。
ex:
red 0px,blue 100px,green 100

径向渐变以圆形的方式实现填充效果

属性：background-image
取值：radial-gradient([size at position],color-point1,color-point2,…)

size at position
size:半径，以px为单位的数字
position:圆心所在位置
取值:
1.x y 具体数字
2.x% y% 元素宽和高的占比
3.关键词
x:left/center/right
y:top/center/bottom