CSS文字描边

本文主要是介绍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;
}

这篇关于CSS文字描边的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---