css字体渐变

一、伪代码：

<div class="test">------></div>	
<style>
   .test{
        background-image:-webkit-linear-gradient(left, red, pink);//开始方向，渐变颜色
    -webkit-background-clip:text;//以盒子内的文字作为裁剪区域向外裁剪，文字之外的区域都将被裁剪掉。
	-webkit-text-fill-color:transparent;//把文字变透明
    }
</style>

首先：给外层div（就是装着"----->"的div盒子）来一个背景渐变。
其次：用webkit-background-clip: text;以外层div的文字作为裁剪区域向外裁剪；
最后：把文字变透明，可以用rgba给文本填充透明颜色或者直接设置color: transparent;

二、效果：

三、参考：

​css3 文字横向渐变,CSS3实现渐变文字效果_Gold RIch Money的博客-CSDN博客

CSS3利用-webkit-background-clip: text;实现文字渐变效果_I俩月亮的博客-CSDN博客_webkit-background-clip