css字体描边技巧

要实现一个比较粗的字体描边

用到的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;
        }
      }