碰到一个需求:页面有一个文字样式不能用图片,得前端用代码实现。文字样式如下
代码实现思路:1.文字设置为从坐上到右下的渐变色;2.创建伪元素’88.8’给文字‘88.8’添加阴影效果(注意:伪元素的层级要比本身dom元素的层级低,否则会覆盖在文字上)
代码:
<view class="money">88.8</view>
.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轴,阴影扩散范围,颜色
}
代码的实现效果图如下,以后遇到这种复杂字体 再也不用切图啦~