一、背景色渐变：
1、linear-gradient：用线性渐变创建图像
MDN文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient()
linear-gradient(
[ [[<angle>| to[top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
<angle>:指定渐变的方向
to left:设置渐变从右向左，相当于270deg
to right:设置渐变从左向右，相当于90deg
to top:设置渐变从下到上，相当于0deg
to bottom:设置 渐变从上到下，相当于180deg(默认值)
如果渐变方向是对角线，可以用to top right这样的关键字方式来实现,可以有多个颜色的渐变
to left top(从右下到左上)
to top right(从左下到右上)
例如：background:linear-gradient(to top right, #f6f5f0,#fefefd,#fff)
<color-stop>用于指定渐变的起止颜色,由一个<color>值，跟随一个可选的终点位置<length>或者<percentage>组成
<color>:指定颜色
<length>:用长度指定起止色位置。不允许负值
<percentage>:用百分比指定起止色位置。
例如：background:linear-gradient(to right, #f6f5f0 40%, fefefd 100%)
2、radial-gradient:用径向渐变创建图像
MDN文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/radial-gradient()
radial-gradient(
[ [ circle || <length> ] [ at <position> ]? , |
[ ellipse || [ <length> | <percentage> ]{2} ] [ at <position> ]? , |
[ [ circle | ellipse ] || <extent-keyword> ] [at <position> ]? , |
at <position> ,
]?
<color-stop-list> [ , <color-stop-list> ]+
)
例如：radial-gradient(circle at center, red 0, blue, green 100%)
<shape>确定圆的类型,默认为椭圆
circle:指定圆形的径向渐变
ellipse:指定椭圆形的径向渐变
<size>确定渐变的尺寸（<extent-keyword> ）
可参考该文章：https://www.cnblogs.com/xiaohuochai/p/5383285.html
用于描述边缘轮廓的具体位置circle | ellipse 都接受该值作为 size
closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边
farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角
<positon>确定圆心的位置。默认是center center,如果只提供了一个，第二个值默认为50%，即为center (中心位置)
横坐标（x轴）：百分比（percentage）| 长度（length） | left | center | right
纵坐标（y轴）：百分比（percentage）| 长度（length） | top | center | bottom
<color-stop> 用于指定渐变的起止颜色：由一个<color>值，跟随一个可选的终点位置<length>或者<percentage>组成
<color>：指定颜色。
<length>：用长度值指定起止色位置。不允许负值
<percentage>：用百分比指定起止色位置。不允许负值
二、文字渐变：
最近常用的方法：
background-clip+text-fill-color
MDN详解：https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-clip
