css 实现文字加描边和投影

实现效果如图：

标签内容：

<i :data-title="score">{{score}}</i>

css样式：

i::before {
  content: attr(data-title);
  position: absolute;
  -webkit-text-stroke: 10px #ffffff; /* 描边 */
  text-shadow: #290101 -6px 6px 6px; /* 投影 */
}
i {
  position: relative;
  font-size: 7rem;
}
i::after {
  content: attr(data-title);
  position: absolute;
  left: 0;
  color: #c70808; /* 文字颜色 */
  -webkit-text-stroke: 0; /* 去掉投影 */
}

js：

<script>
export default {
  data () {
    return {
      score: 80
    }
  }
}
</script>

备注：加粗描边不会‘吃掉’文字的宽度。