css设置文字渐变色及文本阴影

碰到一个需求：页面有一个文字样式不能用图片，得前端用代码实现。文字样式如下

代码实现思路：1.文字设置为从坐上到右下的渐变色；2.创建伪元素’88.8’给文字‘88.8’添加阴影效果（注意：伪元素的层级要比本身dom元素的层级低，否则会覆盖在文字上）

代码：

<view class="money">88.8view>

.money {
  font-size: 100rpx;
  font-weight: 600;
  color: #FEEECF;
  //下面三行代码是控制文本渐变色，bottom right表示从左上到右下
  background-image: linear-gradient(to bottom right, #FEEECF, #FFC968);
  -webkit-background-clip: text;
  color: transparent;
}
.money::before {
  content: "88.8"; //与DOM元素的内容保持一致进行覆盖
  position: absolute;
  z-index: -1;
  text-shadow: 0 2rpx 5rpx #F5001A;// X轴，Y轴，阴影扩散范围，颜色
}

代码的实现效果图如下，以后遇到这种复杂字体 再也不用切图啦~