text-shadow适合快速兼容实现单色描边，paint-order仅对svg有效、在html中无效；必须用8层0模糊的text-shadow闭合描边，color设为transparent，并注意真机测试兼容性。
直接说结论：text-shadow适合快速兼容实现单色描边，paint-order适合高保真 SVG 场景；二者不能混用，且 paint-order 在 HTML 文本中基本无效。
text-shadow 实现文字边框的正确写法
常见错误是只写 2–4 层阴影，结果边角漏空、边缘发虚。真正“闭合”的描边必须用 8 层 text-shadow，每个方向一个，且所有 blur-radius 必须为 0：
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;- 文字颜色建议设为
color: transparent，避免填充色与描边色冲突导致视觉错位 - 小字号（≤16px）下必须加
-webkit-font-smoothing: antialiased，否则锯齿放大偏移感 - Firefox 和旧版 Safari 对 >6 层阴影支持不稳定，真机测试 iOS Safari 是刚需
paint-order 只对 SVG 生效，HTML 中写上也白搭
paint-order: stroke fill 看起来很美，但它在 HTML 普通文本里完全不触发——这个属性只作用于 SVG 的 <text></text> 元素，且前提是 stroke 和 fill 都已显式声明。
- HTML 中写
paint-order: stroke fill不会改变任何渲染结果，连 warning 都不会报 - SVG 方案要手动把文字转成
<svg><text stroke="#000" stroke-width="2" fill="none">xxx</text></svg>，无法继承父级字体设置 - 描边和填充颜色对比度不够（比如都用浅灰）、或
stroke-width ，即使顺序对了也看不出效果
-webkit-text-stroke 是什么，能用吗
-webkit-text-stroke 是 WebKit 专属属性，Chrome/Safari 支持，Firefox/Edge 完全无视。它不是“边框”，而是真正的字形外描边，比 text-shadow 更精准，但代价明确：
- 语法简单：
-webkit-text-stroke: 2px #ff6b6b，但必须配color: transparent或浅色填充，否则描边被盖住 - 不支持多色描边，也不能控制描边内外顺序（没有
paint-order的概念） - 移动端 Safari 对
transparent+-webkit-text-stroke组合在 iOS 15–16 有渲染丢失问题，需降级 fallback - 别试图加前缀让它在 Firefox 工作——它就是 WebKit-only，没标准路径
最容易被忽略的一点：描边是否“贴字”，不取决于写了多少行 CSS，而取决于字体本身的轮廓精度、设备像素比、以及是否在真实设备上验证过 iOS Safari 和 Android WebView 的表现。模拟器永远比不上真机滚动时那一帧的抖动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
