-webkit-text-stroke不能单独使用，因其是webkit/blink私有属性，firefox完全不支持且无-moz前缀，标准text-stroke尚未被任何主流浏览器启用；描边宽度超3px易致字形粘连，且仅支持居中描边，无法实现外/内描边。
-webkit-text-stroke 能直接、干净地实现文字描边，但 Firefox 和旧版 Edge 完全不支持；text-shadow 兼容性好，但描边边缘易出现锯齿、颜色堆叠，且无法真正“居中描边”。
为什么 -webkit-text-stroke 在多数项目里不能单独用
它本质是 WebKit/Blink 内核的私有属性，Firefox（Gecko）至今未实现 text-stroke 标准属性，连带 -moz-text-stroke 也不存在。这意味着：
- 在 Firefox 中写
-webkit-text-stroke: 2px #000完全无效，文字会回退到默认color显示，毫无描边 -
text-stroke（无前缀）虽已进入 CSS Text Decoration Level 4 草案，但所有主流浏览器均未启用，写上等于白写 - 描边宽度超过
3px时，部分字体（尤其是细体或无衬线体）会出现字形膨胀、笔画粘连，视觉上像被“吃掉”了一块 - 不支持描边对齐方式：只能居中描边，无法指定“外描边”或“内描边”，设计师要求的“紧贴文字外轮廓”效果做不到
text-shadow 模拟描边的实操要点
用 text-shadow 打八个方向阴影是最常见做法，但容易忽略关键细节：
- 必须显式设置
color（哪怕只是#000），若设为transparent，阴影会整体变淡甚至不可见——因为阴影是基于文字内容渲染的，没内容就没影 - 描边均匀度取决于阴影数量和偏移值：只写
1px 0 #000, 0 1px #000会漏掉斜角；推荐至少覆盖上下左右 + 四个对角：1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000, 1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000 - 大字号（>60px）下，
text-shadow描边边缘会有明显锯齿，尤其在非 Retina 屏幕上；加blur-radius（如0.5px）能柔化，但会削弱锐利感 - 性能影响极小：Chrome/Firefox 对
text-shadow渲染做了深度优化，1000 个描边文字元素带来的额外绘制耗时通常
何时该放弃 CSS，改用 SVG 描边
当项目明确要求以下任意一点时，CSS 方案就该让位：
- 需要精确控制描边位置（比如仅外描边）、线型（虚线、点划线）或渐变描边色
- 文字需响应式缩放，且描边粗细必须严格保持视觉比例（
text-stroke的px单位在缩放时会失真，SVG 的stroke-width可配合vector-effect: non-scaling-stroke解决） - 目标环境包含大量 Firefox 用户，或需通过 WCAG AA/AAA 认证（
text-shadow在高对比模式下可能完全消失，而 SVG 描边仍可被读取） - 描边要叠加在复杂动效之上（如路径动画、morphing），CSS 无法驱动描边形变，SVG
<text></text>的stroke属性可被 GSAP 或原生SMIL直接操控
真正难的不是选哪个 API，而是判断「描边是否构成信息传达的关键通道」——如果去掉描边后文字在深色背景上就难以识别，那它就不是装饰，而是可访问性刚需，这时候连 text-shadow 都不够稳，得上 SVG。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
