背景漸變
1.從上到下的線性漸變
background-image: linear-gradient(#e66465, #9198e5);
2.從左到右的線性漸變
background-image: linear-gradient(to right, red , yellow);
3.從左上角到右下角的線性漸變
background-image: linear-gradient(to bottom right, red, yellow);
4.指定的角度的線性漸變
background-image: linear-gradient(-90deg, red, yellow);
5.多個顏色節(jié)點(diǎn)的從上到下的線性漸變
background-image: linear-gradient(red, yellow, green);
6.從左到右的線性漸變攒巍，帶有透明度
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
7.顏色節(jié)點(diǎn)均勻分布的徑向漸變
background-image: radial-gradient(red, yellow, green);
8.顏色節(jié)點(diǎn)不均勻分布的徑向漸變
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
9.形狀為圓形的徑向漸變
background-image: radial-gradient(circle, red, yellow, green);
文字漸變
實現(xiàn)方法如下：
background: linear-gradient(to top, #f0485a, #16c0ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
