本文主要是介绍前端 CSS 经典：文字描边，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
前言：文字描边有两种实现方式
1. text-shadow
设置 8 个方向的文字阴影，缺点是只有八个方向，文字转角处可能有锯齿状。不支持文字透明，设置 color: transparent，文字会成描边颜色。
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><metaname="viewport"content="initial-scale=1.0, user-scalable=no, width=device-width"/><title>document</title><style>body {background: #000;}p {text-align: center;font-weight: bold;font-size: 5em;color: red;text-shadow: 0 -2px #fff, 2px 0px #fff, 0 2px #fff, -2px 0 #fff,-2px -2px #fff, 2px 2px #fff, 2px -2px #fff, -2px 2px #fff;}</style></head><body><p>人生若只如初见</p><p>何事秋风悲画扇</p><script></script></body>
</html>2. -webkit-text-stroke
描边属性，支持文字透明。只留描边。缺点是兼容性，文字会变细，文字变细可以通过 JS 解决。
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><metaname="viewport"content="initial-scale=1.0, user-scalable=no, width=device-width"/><title>document</title><style>body {background: #000;}p {font-weight: bold;font-size: 5em;color: red;-webkit-text-stroke: 4px #fff;position: relative;}p::after {content: attr(data-text);position: absolute;left: 0;top: 0;text-align: center;-webkit-text-stroke: 0;}</style></head><body><p>人生若只如初见</p><p>何事秋风悲画扇</p><script>const ps = document.querySelectorAll("p");ps.forEach((p) => {p.dataset.text = p.textContent;});</script></body>
</html>
这篇关于前端 CSS 经典：文字描边的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
