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;
}