文字顏色漸變效果
在開發的時候經常會有實現文字漸變效果的這種需求，接下來就和大家分享一個實現的過程。有兩種實現的方式：
第一種：
這裡想說明兩個比較重要的知識點：
1.偽元素的conten屬性可以使用attr（）的方式，讓元素裡面的文字變成可變的。這個在我平常用vue寫業務程式碼的時候用的還是比較多的，個人感覺也是非常的實用。
2.css中遮罩屬性mask。在這我只是使用了線性漸變的這種方式來達到我想要的效果。其實mask屬性的作用並沒有那麼簡單。它還可以通過新增背景圖片來達到一些比較酷炫的效果
這是mdn上面的使用教程:
不僅能實現顏色漸變的效果，還能將圖片和顏色配合使用。
/* Keyword value */
字型顏色漸變程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin
第二種：
這一種實現的方式其實利用的是背景顏色漸變的原理，想到字型顏色漸變其實我腦子裡第一個想到的就是利用背景顏色。但是畢竟沒有做過這方面的需求，沒想到試了一下，真的可行，以下是3個重點：
1. background: linear-gradient（to right,pink,black），背景顏色漸變的效果，如果不寫方向的話，預設是從上到下的漸變效果。
這裡我踩了一個坑，我原來寫的是（right,pink,black）的，在谷歌上完全不起作用，但是加上to後就可以了。所以還是得按照標準的寫法。。。
2.原本以為background-clip: border-box|padding-box|content-box;只有這三種屬性，沒想到居然還有一種，那就是-webkit-background-clip: text;通過這種形式，可以將背景顏色鎖定在了文字內容的區域，從而達到了顏色漸變的效果
3.text-fill-color： 指定文字的填充顏色。預設的顏色是transparent；如果同時設定color的顏色和text-fill-color的顏色的話，text-fill-color的顏色會覆蓋color的顏色。
案例中我已經將字型的顏色設定為紅色，但是我又將text-fill-color的顏色設定為透明，所以字型的顏色就不起作用了。
需要注意的是：可以直接將color設定為transparent，也就是透明。然後text-fill-color這個屬性就可以省略了。漸變的效果還是有效的。
text-fill-color屬性的拓展
text-fill-color屬性不僅能讓我們實現顏色漸變的效果，還能實現文字鏤空的效果。屬性就是這個：-webkit-text-stroke: 1px red;
字型顏色漸變程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
h2{
color: red;
background: linear-gradient(to right,pink,black);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<h2>
顏色漸變效果
</h2>
</body>
</html>