CSS3实现渐变色字体

前两天在学习移动端项目，于是就拿京东的移动端页面来模仿和学习了，
在模仿的过程中，我发现了京东移动端页面的字体有渐变色，很是好奇，很感兴趣，于是就是查看了代码，并且百度了一下，发现实现渐变色字体的两种方法，（目前我自己就发现两种），
第一种比较简单，直接上代码：

方法一：
html结构

<p class="font1">你好，这是我的渐变色字体</p>

样式：

.font1{
            font-size:22px;
            background-image: -webkit-linear-gradient(bottom, rgb(201, 115, 255), rgb(20, 11, 255));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

效果：

方法二：
html结构：

<h2 class="font2" data-text="渐变色字体一">渐变色字体一</h2>

css样式：

 .font2 {
            display: inline-block;
            font-family: '微软雅黑';
            font-size: 10em;
            position: relative;
        }

        .font2::after {
            content: attr(data-text);
            color: green;
            position: absolute;
            left: 0;
            z-index: 2;
            -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0)));
        }

效果：

由于这些效果的实现都是依赖webkit内核实现的，所以，这种效果在webkit内核的浏览器中会正常显示，而其他非webkit内核的浏览器就没法正常显示了，有些会显示纯色，有些会直接显示黑色字体。