text-shadow实现彩色描边易糊或偏移，因其本质是投影而非描边；需严格使用8层0模糊半径的阴影、±1px偏移、transparent文字色及抗锯齿，并注意Safari兼容性与性能限制。
text-shadow 实现彩色描边为什么总显得糊或偏移？
因为 text-shadow 本质是投影，不是描边；多层叠加时，像素级偏移和模糊半径（blur radius）会相互干扰。浏览器不会自动对齐所有阴影边缘，尤其在小字号或高缩放下，容易出现“毛边”或颜色混叠。
- 描边效果必须用至少 8 个方向的
text-shadow（上、下、左、右 + 四角），缺一不可 - 所有阴影的
blur-radius必须为0，否则描边变虚、颜色发散 - 水平/垂直偏移量（
h-offset/v-offset）需严格控制在 ±1px，超出就露白底或断连 - 字体需启用抗锯齿：
-webkit-font-smoothing: antialiased，否则边缘锯齿放大描边缺陷
怎么写才能让彩色描边真正“贴字”不漏底？
关键不是堆颜色，而是用纯色阴影围出封闭路径，并确保背景与文字颜色形成安全对比。漏底通常是因为阴影间隙没填满，或文字本身有透明通道（如某些 icon font 或 SVG text）。
- 基础结构固定为 8 层：
text-shadow: -1px -1px 0 #f00, 0 -1px 0 #f00, 1px -1px 0 #f00, ... - 每层只改方向，颜色可不同（实现渐变描边），但所有
blur-radius必须是0 - 文字颜色（
color）建议设为transparent，靠描边显形，避免内外色差导致视觉错位 - 若容器有背景色，需确认该背景不会透过文字“空洞”透出——
background-clip: text不适用此处，它不控制描边
Chrome 和 Safari 对 text-shadow 多重叠加的兼容差异
Chrome（Blink）对 >6 层 text-shadow 的渲染更稳定；Safari（WebKit）在 iOS 15–16 上曾有 4 层以上丢影问题，且对 transparent 文字色的支持晚于 Chrome。
- 真机测试必做：iOS Safari 下用
color: transparent+ 多色描边，可能部分阴影消失 - 降级方案：改用
color: #000+ 单色描边（如#fff），兼容性提升明显 - CSS 自定义属性（
--border-color）传入text-shadow值，在 Safari 中部分版本不生效，建议内联写死 - 性能提示：超过 12 层阴影，滚动时可能触发重绘抖动，尤其在低端 Android WebView
有没有比 text-shadow 更靠谱的替代方案？
有，但代价明确：SVG stroke 属性最准，-webkit-text-stroke 次之。前者要换 DOM 结构，后者不支持多色描边。
-
-webkit-text-stroke: 2px #ff6b6b可直接描边，但只能单色，且 Firefox 完全不支持 - SVG 方案中，
- 不要用
filter: drop-shadow()模拟——它是整体投影，无法做出紧贴文字轮廓的描边 - 如果项目已用 Tailwind，别试图封装
text-shadow工具类，多层值无法被 JIT 编译正确提取，易出错
描边不是加一层滤镜，是用像素把字“框”出来。每个方向的偏移、每个颜色的顺序、每个浏览器对 transparent 的解释，都得亲手试过才敢上线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
