填坑之路【字渐变之坑】

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