CSS文字描边

// 方法3
const p = document.querySelector("p")
      p.dataset.content = p.textContent

@mixin text-stroke($color: #fff, $width: 1px) {
  text-shadow: 0 -#{$width} #{$color}, #{$width} 0 #{$color},
    0 #{$width} #{$color}, -#{$width} 0 #{$color},
    -#{$width} -#{$width} #{$color}, #{$width} #{$width} #{$color},
    #{$width} -#{$width} #{$color}, -#{$width} #{$width} #{$color};
}

p {
  font-size: 5em;
  font-weight: bold;
  font-family: "手札体-简";
  // 方法1:
  // @include text-stroke(#1890ff, 2px);

  // 方法2:
  // -webkit-text-stroke: 2px #1890ff;

  // 方法3:
  -webkit-text-stroke: 2px #1890ff;
  position: relative;
}

// 方法3:
p::after {
  content: attr(data-content);
  position: absolute;
  left: 0;
  top: 0;
  -webkit-text-stroke: 0;
}