关注点

实现文字渐变，这里涉猎了下面 2 个重要的属性：

background + -webkit-background-clip
mask 这里我分别用这 2 个不同的属性来实现文字渐变色

方法一

h1 {
  background: linear-gradient(0deg, #36829f 0%, #e23749 100%);
  -webkit-background-clip: text; // 位置必须在得再背景之后
  color: transparent;
}

代码很少我逐个看下，background: linear-gradient(180deg, #f8829f 0%, #e23749 100%);这里其实是简写方式，实际是给background-image设置渐变色。 CSS3 渐变（Gradients）

-webkit-background-clip: text;这行就要说到，background-clip 属性了，我们来看看 W3Cschool 上的说明

background-clip 属性规定背景的绘制区域

语法
background-clip: border-box|padding-box|content-box;

上面取值 text 的情况，看到前面的前缀，大家应该也能想到，它的兼容性问题了，目前还不是能所有浏览器都支持。

取值为 text 的意思，就是以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。

所以，我们最后写color: transparent; 让文字为透明色，就是让后面背景色显示出来。

方法二

     h1{
        position: relative;
        color:red;
    }
    h1:before{
        content: attr(text);
        position: absolute;
        z-index: 10;
         color:#36829f;
         -webkit-mask:linear-gradient(to left, blue, transparent );
    }

content取值 attr 就是用来获取属性值的，content:attr(属性名);

content: attr(text); 能获取到元素的 text 属性，这里的这个text属性可以随意自定义，像这样
<h1 txt="中国北京">中国北京</h1>
然后content属性这样写，content: attr(txt); 同样是可以起作用的。

mask属性简单说，就是能让元素的某一部分显示或隐藏。CSS中的mask属性允许用户屏蔽或剪裁特定点的图像来实现，部分或完全隐藏某个元素的可见性

这里其实就是，原始 red + 生成的 #36829f颜色元素 + 生成的元素上的 mask，3种情况叠加最终得到下面渐变色文字。

测试用例

CSS如何实现文字颜色渐变

关注点

方法一

方法二