-webkit-text-stroke 实现空心字需配合 color: transparent，仅 webkit/blink 浏览器支持；firefox 需用 8 层 0 模糊的 text-shadow 模拟描边；发光用带模糊的 text-shadow；组合效果须伪元素分层实现。
用 text-stroke 实现文字描边（空心字）
直接支持描边的属性是 -webkit-text-stroke，但它只在基于 WebKit/Blink 的浏览器（Chrome、Safari、Edge）中可靠生效，Firefox 完全不支持。
关键点在于：必须配合 color: transparent 才能呈现「空心」效果；若保留文字色，描边会叠在实心字上，看起来像加粗+描边混合体。
-
-webkit-text-stroke接两个值：宽度（如2px）和颜色（如#000），不支持渐变 -
text-stroke是标准属性，但目前仅 Safari 16.4+ 有限支持，不能当作兼容 fallback - 描边宽度超过
4px时，在小字号（16px以下）下容易糊成一团，建议字号 ≥24px再用
.outlined {
font-size: 32px;
font-weight: bold;
color: transparent;
-webkit-text-stroke: 2px #333;
}
用 text-shadow 模拟描边（兼容性方案）
当需要 Firefox 或旧版 Edge 支持时，得靠 text-shadow 多层叠加模拟。这不是真描边，而是用 8 个方向的硬边阴影围出轮廓。
常见错误是只写 4 层（上下左右），结果斜角处有缺口；完整包围至少要 8 层，或用工具生成（比如 CSS 描边生成器）。
- 每层
text-shadow的模糊半径必须为0，否则边缘发虚，失去「描边感」 - 偏移量需严格对称：例如
1px 0 0、0 1px 0、-1px 0 0、0 -1px 0，再加四个对角1px 1px 0等 - 性能上，超过 12 层阴影可能拖慢重绘，尤其在动画中，慎用
.stroke-fallback {
color: #fff;
text-shadow:
-1px -1px 0 #000,
0 -1px 0 #000,
1px -1px 0 #000,
-1px 0 0 #000,
1px 0 0 #000,
-1px 1px 0 #000,
0 1px 0 #000,
1px 1px 0 #000;
}
用 text-shadow 做发光效果（非描边）
发光本质是带模糊的单层或多层 text-shadow，和描边逻辑相反：它不要求边缘锐利，反而依赖模糊半径制造光晕。
最易踩的坑是把发光和描边混用——比如先描边再加发光，结果描边被模糊吞噬，只剩一团光。
- 单层发光推荐写法：
text-shadow: 0 0 12px rgba(255, 255, 255, 0.8)，0 0表示无偏移，12px控制光晕大小 - 多层发光可叠加不同颜色/模糊值增强层次，例如外圈白光 + 内圈蓝光，但总层数建议 ≤ 3，避免渲染开销突增
- 移动端慎用 >
20px的模糊值，部分 Android WebView 会出现光晕锯齿或闪烁
.glow {
color: #fff;
text-shadow: 0 0 10px #ffcc00, 0 0 20px rgba(255, 204, 0, 0.5);
}
描边 + 发光组合时的层级陷阱
想同时有清晰描边和柔和发光，不能简单堆叠 -webkit-text-stroke 和 text-shadow——WebKit 下描边会优先渲染，发光可能被裁剪或变色。
真正可靠的方案是分层：用伪元素画描边，本体负责发光，两者错开 z-index 或 position。
- 描边层设
color: transparent+-webkit-text-stroke，再用z-index: 1 - 发光层设
color: #fff+text-shadow，z-index: 0，并加pointer-events: none防止遮挡交互 - 必须用
position: relative包裹父容器，否则伪元素定位失效
这个组合在 Safari 和 Chrome 中稳定，但 Firefox 仍只能靠纯 text-shadow 模拟，无法做到描边+发光完全一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
