text-shadow实现文字描边必须用8层±1px偏移、blur-radius为0的阴影围成封闭路径，缺一不可；单层或带模糊会导致断边、露底或发虚，且需设color为transparent并启用抗锯齿。
text-shadow 是目前最通用、兼容性最好的文字描边实现方式，但直接写 1px 1px 0 #000 这类单层阴影只会出半边描边，视觉上不闭合、易露底。真正可用的描边必须用至少 8 层精准控制的阴影围成封闭路径。
为什么单层 text-shadow 描边总看起来断开或发虚？
因为描边不是“加一层边”，而是“在文字所有方向上补一圈像素”。单层阴影只覆盖一个方向（比如右下），其余三边空白，自然漏底；如果加了 blur-radius（哪怕只是 0.5px），边缘就会发散、混色、糊成光晕。
- 所有阴影的
blur-radius必须为0—— 写成0，不能省略或写成空格 - 偏移量严格限定在 ±1px 或 ±2px（推荐从 ±1px 起手），超出会导致间隙或重叠白边
- 必须覆盖全部 8 个方向：上、下、左、右 + 左上、右上、左下、右下，缺一不可
-
color设为transparent，靠阴影显形，避免文字本体与描边色差造成错位感
怎么写出真正“贴字不漏底”的 8 层 text-shadow？
基础模板固定为：
text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000,
-1px 0px 0 #000, 1px 0px 0 #000,
-1px 1px 0 #000, 0 1px 0 #000, 1px 1px 0 #000;
要点：
- 顺序不重要，但每层的
h-offset和v-offset必须是整数 ±1px 组合，不能是0.8px或1.5px - 颜色可不同，实现渐变描边（如左半红、右半蓝），但所有层都得有，否则某侧会断
- 若要加粗描边（比如 2px），把所有偏移量换成 ±2px，并补上中间层（如
-2px 0,0 -2px等），共 12 层更稳 - 字体必须启用抗锯齿：
-webkit-font-smoothing: antialiased，否则锯齿会放大描边缺口
Safari 下 color: transparent + 多色描边失效怎么办？
iOS Safari（尤其 15–16）对 transparent 文字色 + 超过 4 层 text-shadow 支持不稳定，常丢影。真机测试必做，别信模拟器。
立即学习“前端免费学习笔记（深入）”；
- 降级方案：放弃
transparent，改用实色文字 + 单色描边，例如color: #fff; text-shadow: ... #000 - 避免用 CSS 变量传
text-shadow值，Safari 部分版本不解析，直接内联写死颜色 - 超过 12 层阴影时，低端 Android WebView 可能滚动卡顿，优先砍掉冗余层，保留 8 层核心方向
有没有比 text-shadow 更准的描边方案？
有，但代价明确：
-
-webkit-text-stroke：语法简单（-webkit-text-stroke: 2px #ff6b6b），描边均匀，但 Firefox 完全不支持，且无法多色 - SVG
<text>+stroke：像素级精确，支持多色、虚线、miter 等高级控制，但需改 DOM 结构，字体继承、响应式缩放都要额外处理
实际项目里，8 层 text-shadow 仍是平衡兼容性、可控性和开发成本的最优解——前提是每层参数都卡在 ±1px / 0 / transparent 这三个硬约束上，少一个就容易翻车。
