設(shè)計(jì)出了一個(gè)這樣的需求，需要有一個(gè)數(shù)字擁有正常的顏色，但當(dāng)鼠標(biāo)放上去的時(shí)候要變成漸變色，大家都知道，css是沒(méi)有顏色漸變這個(gè)屬性的，只有背景顏色的漸變，這里有兩種實(shí)現(xiàn)方法。

    1.讓設(shè)計(jì)把字給你摳出來(lái)

    這里扣圖片對(duì)于瀏覽器的兼容性非常好，會(huì)兼容基本上所有瀏覽器，圖片可以任意大小，但要求底色與div盒子中底色一致，這樣視覺(jué)上不會(huì)有問(wèn)題，而我們可以直接改變圖片所屬div的背景顏色，就能實(shí)現(xiàn)通過(guò)背景顏色和圖片實(shí)現(xiàn)字體顏色的漸變了。

    但是由于是圖片且底色固定，首先如果需要碰到底色頻繁變化的會(huì)很麻煩，其次關(guān)于數(shù)量的問(wèn)題，大數(shù)量的扣字體圖片也是對(duì)設(shè)計(jì)師耐心的考驗(yàn)，如果各位前端小伙伴不怕被刀可以去試試，另外，對(duì)于靜態(tài)頁(yè)面而言，大量的加載圖片也是會(huì)對(duì)性能的有影響，所以這里推薦第二種方法。

    2.通過(guò)-webkit-text-fill-color: transparent;

    這里主要用兩種屬性：

    -webkit-background-clip: text;意思是，以盒子內(nèi)的文字作為裁剪區(qū)域向外裁剪，文字之外的區(qū)域都將被裁剪掉。

    -webkit-text-fill-color: transparent;強(qiáng)制給文字設(shè)置顏色，不受其他樣式干擾

    這里是webkit內(nèi)核瀏覽器擁有的css，比如谷歌和edge瀏覽器都是使用的這個(gè)。

    相信大家都看到了以上兩種屬性，他們分別是裁剪出文本與強(qiáng)制把文本設(shè)置成透明，這樣我們也可使用background-color來(lái)進(jìn)行變換顏色。

    最后由于background并不是所有的屬性都支持transition過(guò)渡的，很遺憾，背景漸變就在其中之列，也就是說(shuō)背景顏色的漸變無(wú)法通過(guò)顏色緩慢變化達(dá)到一種連貫的效果，所以只能通過(guò)套div利用透明度手寫(xiě)過(guò)渡了。