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内核的浏览器就没法正常显示了，有些会显示纯色，有些会直接显示黑色字体。