一、背景色漸變：
1、linear-gradient：用線性漸變創(chuàng)建圖像
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:設(shè)置漸變從右向左，相當(dāng)于270deg
to right:設(shè)置漸變從左向右，相當(dāng)于90deg
to top:設(shè)置漸變從下到上，相當(dāng)于0deg
to bottom:設(shè)置 漸變從上到下，相當(dāng)于180deg(默認(rèn)值)
如果漸變方向是對(duì)角線，可以用to top right這樣的關(guān)鍵字方式來實(shí)現(xiàn),可以有多個(gè)顏色的漸變
to left top(從右下到左上)
to top right(從左下到右上)
例如：background:linear-gradient(to top right, #f6f5f0,#fefefd,#fff)
<color-stop>用于指定漸變的起止顏色,由一個(gè)<color>值，跟隨一個(gè)可選的終點(diǎn)位置<length>或者<percentage>組成
<color>:指定顏色
<length>:用長(zhǎng)度指定起止色位置。不允許負(fù)值
<percentage>:用百分比指定起止色位置。
例如：background:linear-gradient(to right, #f6f5f0 40%, fefefd 100%)
2、radial-gradient:用徑向漸變創(chuàng)建圖像
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>確定圓的類型,默認(rèn)為橢圓
circle:指定圓形的徑向漸變
ellipse:指定橢圓形的徑向漸變
<size>確定漸變的尺寸（<extent-keyword> ）
可參考該文章：https://www.cnblogs.com/xiaohuochai/p/5383285.html
用于描述邊緣輪廓的具體位置circle | ellipse 都接受該值作為 size
closest-side：指定徑向漸變的半徑長(zhǎng)度為從圓心到離圓心最近的邊
closest-corner：指定徑向漸變的半徑長(zhǎng)度為從圓心到離圓心最近的角
farthest-side：指定徑向漸變的半徑長(zhǎng)度為從圓心到離圓心最遠(yuǎn)的邊
farthest-corner：指定徑向漸變的半徑長(zhǎng)度為從圓心到離圓心最遠(yuǎn)的角
<positon>確定圓心的位置。默認(rèn)是center center,如果只提供了一個(gè)，第二個(gè)值默認(rèn)為50%，即為center (中心位置)
橫坐標(biāo)（x軸）：百分比（percentage）| 長(zhǎng)度（length） | left | center | right
縱坐標(biāo)（y軸）：百分比（percentage）| 長(zhǎng)度（length） | top | center | bottom
<color-stop> 用于指定漸變的起止顏色：由一個(gè)<color>值，跟隨一個(gè)可選的終點(diǎn)位置<length>或者<percentage>組成
<color>：指定顏色。
<length>：用長(zhǎng)度值指定起止色位置。不允許負(fù)值
<percentage>：用百分比指定起止色位置。不允許負(fù)值
二、文字漸變：
最近常用的方法：
background-clip+text-fill-color
MDN詳解：https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-clip
