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內核的瀏覽器就沒法正常顯示了，有些會顯示純色，有些會直接顯示黑色字體。