-webkit-text-stroke 是唯一被主流浏览器支持的文字描边方式，因原生 text-stroke 未标准化且未被任何引擎实现；chrome、edge、safari 支持该前缀属性，firefox 完全不支持，需搭配 -webkit-text-fill-color: transparent 使用，参数为 width color 且顺序不可颠倒。
-webkit-text-stroke 是目前唯一被主流浏览器支持的文字描边实现方式，原生 text-stroke（无前缀）尚未进入 CSS 标准，所有现代浏览器都不识别它。
为什么直接写 text-stroke 没效果？
因为该属性从未被正式标准化，CSS Text Decoration Level 4 草案中曾提出 text-stroke，但至今未被任何浏览器引擎实现。你看到的“有效果”，几乎全是靠 -webkit-text-stroke 这个私有前缀属性撑起来的。
- Chrome、Edge、Safari：支持
-webkit-text-stroke（包括宽度和颜色） - Firefox：完全不支持该属性，连前缀版也不认
- 使用时必须搭配
-webkit-text-fill-color: transparent才能显出纯描边效果（否则文字本体颜色会覆盖描边）
-webkit-text-stroke 的参数怎么配？
它接受两个值：width 和 color，顺序不能反，也不能只写一个：
-webkit-text-stroke: 2px #ff6b6b;
-
width支持px、em、rem，但不推荐用相对单位，容易在缩放或响应式下失控 -
color支持任意合法颜色值（hex、rgb()、hsl()、transparent），但设为transparent就等于没描边 - 不能和
text-shadow混用实现“伪描边”——那只是多层阴影叠加，边缘毛糙、性能差、不可控
Firefox 下怎么 fallback？
没有等效的原生属性，只能换思路：
立即学习“前端免费学习笔记（深入）”；
- 用
text-shadow模拟（4 方向各 1px）：text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000;
但注意：这在斜体或字体较细时易露白边，且无法控制描边圆角 - 用 SVG
<text></text>替代 DOM 文字，通过stroke+fill="none"真正实现描边，兼容性好，但丧失语义和可访问性 - 服务端/构建时生成带描边的图片文字（仅限静态标题），不推荐用于正文
真正跨浏览器稳定的文字描边，目前只有 SVG 路径级控制能做到；CSS 层面的 -webkit-text-stroke 是实用妥协，但得时刻记得它在 Firefox 里是彻底失效的——别指望加个 @supports 就能兜住。
