前言：文字描边有两种实现方式
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" />
<meta
name="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" />
<meta
name="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>
本文转载自: https://blog.csdn.net/weixin_64684095/article/details/139917685
版权归原作者 yqcoder 所有， 如有侵权，请联系我们删除。
版权归原作者 yqcoder 所有， 如有侵权，请联系我们删除。