微信小程序实现文字渐变

直接上代码

  
.text{
  font-family: STSongti-SC-Black;
  font-size: 28px;
  background:linear-gradient(to right, #b56045, #b7745c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:0px 2px 2px 0px rgba(78,42,3,1);
}

效果如图

详细说明:

渐变文字，其实是偷换了概念运用背景色的渐变

background-image属性： 设置背景图片为从左到右渐变色。
background-clip属性： 规定背景的绘制区域。（该属性上的-webkit-，说明该属性还存在兼容问题，并不是所有浏览器都支持，在W3C是没有text这个值的，这里的text是背景被裁剪到文字）

color: transparent; 设置文字颜色为透明，然后面的背景色显示出来。