三種類(lèi)型的漸變：
- 線性 (由
linear-gradient函數(shù)創(chuàng)建) - 徑向(由
radial-gradient函數(shù)創(chuàng)建) - 圓錐 (由
conic-gradient函數(shù)創(chuàng)建)
漸變提示
可以在兩個(gè)顏色中再添加一個(gè)參數(shù)，這個(gè)參數(shù)即可設(shè)定這兩個(gè)顏色從什么位置開(kāi)始漸變。
image.png
image.png
改變漸變方向
水平漸變
image.png
image.png
對(duì)角漸變
image.png
image.png
角度漸變
漸變方向：0deg 代表漸變方向?yàn)閺南碌缴? 90deg 代表漸變方向?yàn)閺淖蟮接?，諸如此類(lèi)正角度都屬于順時(shí)針?lè)较颉?而負(fù)角度意味著逆時(shí)針?lè)较颉?/p>
顏色終止位置
可以設(shè)置百分比或者任意絕對(duì)數(shù)值來(lái)設(shè)置它們的終止位置
0%表示開(kāi)始位置，100%表示結(jié)束位置
image.png
image.png
創(chuàng)建色帶和條紋
顏色后面所帶的兩個(gè)參數(shù)：一個(gè)代表漸變開(kāi)始的位置，另一個(gè)是漸變結(jié)束的位置
image.png
image.png
疊加漸變
image.png
堆疊漸變
還可以將漸變一層一層的堆疊上來(lái)，只有上面的漸變是透明的，下面的漸變就可以被看見(jiàn)
#dv {
height: 200px;
background-image: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
image.png
