background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#919698), to(#ff3c78));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
默认大家都知道以下方法能实现文字渐变，在做项目的过程中遇到这样的一个情况。
【PC端的Chrome显示效果】
PC端的Chrome显示效果
【移动端微信显示效果】
移动端微信显示效果
emmm.... 你没有看错。没效果。。
我的代码实现是这样的，把文字渐变的样式设置在父元素上。但是却在两端（PC端和移动端的表现不一样）
HTML：
<h1>
<span>2018</span>
<span>03 / 28</span>
</h1>
CSS：
h1{
font-size: 83rem / @base;
background-image: -webkit-gradient(linear, 0 0, 0 bottom,from(#11ffbd), to(#ff3c78));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
span{
display: block;
text-align: right;
line-height: 1.2em;
}
}
后来我把background-clip + text-fill-color作用于子元素上时，两个表现出来一致的效果。欣喜若狂~~
h1{
font-size: 83rem / @base;
span{
display: block;
text-align: right;
line-height: 1.2em;
background-image: -webkit-gradient(linear, 0 0, 0 bottom,from(#11ffbd), to(#ff3c78));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
作用在子元素上
但这还不是我们想要的效果。要想实现设计图上的效果，办法很简单，在设计图上获取两个色值渐变的边界值。作用于上下两个元素中就行了。
h1{
font-size: 83rem / @base;
span{
display: block;
text-align: right;
line-height: 1.2em;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
span:first-child{
background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#11ffbd), to(#6bb5a3));
}
span:last-child{
background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#919698), to(#ff3c78));
}
}
image.png
