渐变文字

在一篇文章里看到的，有两种方法：
第一种：
首先将包裹字体的span背景渐变
background: linear-gradient(to right, red, blue);
然后通过background-clip（规定背景的绘制区域）这一属性：
background-clip共有四个值：border-box:背景被裁剪到边框盒
padding-box:| 背景被裁剪到内边距框
content-box :背景被裁剪到内容框
text (现在只有 chrome 支持)以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。
我们需要使用background-clip：text；
最后将字体颜色变透明将背景颜色显现
color:transparent;
这是第一个方法。

第二个方法：将包裹字体的h2起个类名text，使用css使其相对定位，颜色为黄色

前端简单说

h2{
position: relative;
color: yellow;
}

然后使用before选择器添加一个属性text，绝对定位，层级为10，颜色为绿色，
使用mask属性（目前，只有webkit内核的浏览器支持mask属性，简单说mask属性，就是能让元素的某一部分显示或隐藏。 ）通过渐变将透明的隐藏，以达成渐变效果
h2:before{
content: attr(text);
position: absolute;
z-index: 10;
color:green;
-webkit-mask:linear-gradient(to left, red, transparent );
}