要实现一个比较粗的字体描边
用到的css属性
-webkit-text-stroke: 0.22rem #BF6C2F;
直接使用没有达到理想的效果,采用两层div,给其中一层添加描边样式并加粗;用absolute布局覆盖描边层
<div class="my-score-1">
{{myScore}}<span>分</span>
</div>
<div class="my-score-2">
{{myScore}}<span>分</span>
</div>
.my-score-1 {
position: absolute;
z-index: 10;
width: 100%;
text-align: center;
color: #fff;
top: 3.6rem;
font-size: 0.68rem;
-webkit-text-stroke: 0.22rem #BF6C2F;
span {
margin-left: 0.1rem;
}
}
.my-score-2 {
position: absolute;
z-index: 100;
width: 100%;
text-align: center;
color: #fff;
top: 3.6rem;
font-size: 0.68rem;
span {
margin-left: 0.1rem;
}
}