css渐变色-文字渐变色与背景渐变色

一、背景色渐变：

1、linear-gradient：用线性渐变创建图像

MDN文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient()

linear-gradient([ [ [ | to [top | bottom] || [left | right] ],]? [, ]+);

:指定渐变的方向

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)

用于指定渐变的起止颜色,由一个值，跟随一个可选的终点位置或者组成

:指定颜色
:用长度指定起止色位置。不允许负值
:用百分比指定起止色位置。
例如：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 || ] [ at ]? , |
[ ellipse || [ | ]{2} ] [ at ]? , |
[ [ circle | ellipse ] || ] [at ]? , |
at ,
]?
[ , ]+
)

例如：radial-gradient(circle at center, red 0, blue, green 100%)

确定圆的类型,默认为椭圆

 circle:指定圆形的径向渐变
 ellipse:指定椭圆形的径向渐变

确定渐变的尺寸（ ）

可参考该文章：https://www.cnblogs.com/xiaohuochai/p/5383285.html

用于描述边缘轮廓的具体位置circle | ellipse 都接受该值作为 size
closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边
farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角

确定圆心的位置。默认是center center,如果只提供了一个，第二个值默认为50%，即为center (中心位置)

横坐标（x轴）：百分比（percentage）| 长度（length） | left | center | right
纵坐标（y轴）：百分比（percentage）| 长度（length） | top  | center | bottom

用于指定渐变的起止颜色：由一个值，跟随一个可选的终点位置或者组成

：指定颜色。
：用长度值指定起止色位置。不允许负值
：用百分比指定起止色位置。不允许负值

二、文字渐变：

最近常用的方法：
background-clip+text-fill-color
MDN详解：https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-clip