text-shadow边缘发虚是因为浏览器对每层阴影单独光栅化再叠加，非矢量路径统一抗锯齿；应仅用4个正交整数偏移（如-1px 0 0 #000）、模糊值为0，并调深描边色补偿交角叠加不均。
没有“标准描边”，只有适配方案：-webkit-text-stroke 在 Safari/Chrome 可靠，Firefox 不支持；text-shadow 是跨浏览器伪描边，但本质是投影叠加，边缘易糊、交角不均。
text-shadow 做描边为什么边缘发虚？
因为浏览器对每层 text-shadow 单独光栅化，再叠加——不是按矢量路径统一抗锯齿。斜向偏移（如 1px 1px 0 #000）、小数像素（0.5px）、非零模糊值（0.1px）都会加剧错位和半透明混叠。
- 只用 4 个正交方向：
-1px 0 0 #000、1px 0 0 #000、0 -1px 0 #000、0 1px 0 #000 - 所有偏移必须是整数像素，模糊值（第三个参数）必须为
0 - 交角处颜色变深（两层叠加），正向处只一层——视觉上像“断开”，可把描边色调深一点补偿（如文字
#333，描边用#111） - iOS Safari（15+）在启用
transform或will-change时可能丢影或偏移，真机必测
-webkit-text-stroke 在哪些浏览器里能用？
-webkit-text-stroke 是 WebKit/Blink 内核专属属性，Chrome、Safari、新版 Edge（Chromium）支持；Firefox 完全不识别，旧版 Edge（EdgeHTML）也无效。
- 必须写全前缀：
-webkit-text-stroke: 2px #000，仅写text-stroke无效 - 描边始终居中，不支持虚线、渐变、端点样式等 SVG 级控制
- 若未显式设
-webkit-text-stroke-color，会继承color值——容易误判为“没生效” - 和
background-clip: text+color: transparent混用时，Safari 可能触发闪烁或断裂
想实现彩色描边或渐变描边怎么办？
原生 CSS 没有办法。8 层 text-shadow（四正向 + 四斜向）可模拟多色轮廓，但 Safari 对 >4 层阴影兼容不稳定，且 color: transparent 在 iOS 上可能丢影。
- 基础写法示例：
text-shadow: -1px -1px 0 #f00, 0 -1px 0 #f00, 1px -1px 0 #f00, ...（共 8 项，每项blur-radius都是0） - 字体必须启用抗锯齿：
-webkit-font-smoothing: antialiased，否则锯齿放大描边缺陷 - 更稳的替代：用两层绝对定位文字，底层放大并填描边色，顶层正常大小填主色；或直接改用 SVG
<text stroke="..." stroke-width="2"></text> - CSS 自定义属性（如
--stroke-color）传入text-shadow值，在 Safari 部分版本不生效，建议内联写死
描边效果在移动端突然失效或偏移
iOS Safari（15+）对 text-shadow 的硬件加速策略变更后，遇到 transform、scale 或 will-change 会合并/裁剪阴影层，常见表现为只剩两条边、整体偏移几个像素、或部分颜色消失。
- 临时规避：移除触发硬件加速的样式，或用
backface-visibility: hidden重置渲染上下文 - 长期解法：对关键文案（如 LOGO、按钮文字）改用 SVG 方案，
<text></text>的stroke属性天然精准、无平台差异 - 不要依赖超过 12 层
text-shadow，低端 Android WebView 滚动时可能抖动
真正麻烦的不是怎么写，而是不同浏览器对“同一行代码”的理解根本不同——描边不是绘图指令，是妥协链上的一个环节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
