只写text-stroke会失效，因其是CSS Text Decoration Level 4草案属性，Firefox完全不识别，Safari 16.4+、Chrome 119+、Edge 119+虽支持无前缀版本，但生产环境仍需双写-webkit-text-stroke和text-stroke以兼顾兼容性。
-webkit-text-stroke 是实现文字描边最直接、语义最清晰的 CSS 属性，但必须搭配 color 控制填充色，且需注意它目前仍是 WebKit 专属，Firefox 和部分旧版 Edge 不支持标准版 text-stroke。
为什么只写 text-stroke 会失效
标准草案中的 text-stroke 在 Firefox 中完全不识别，Safari 16.4+、Chrome 119+、Edge 119+ 虽已支持无前缀版本，但生产环境仍建议双写：
-
-webkit-text-stroke: 2px #000—— 所有 WebKit 内核浏览器（含新版 Safari/Chrome/Edge）都认 -
text-stroke: 2px #000—— 仅作为未来兼容占位，当前可省略，但加了不报错 - 漏掉
-webkit-前缀 → Chrome/Safari 描边消失，文字只剩默认color
color: transparent 不是可选项，而是空心描边的关键
描边本身不遮盖文字填充；color 决定内部是否可见。常见误操作：
- 只设
-webkit-text-stroke，没动color→ 文字黑底白边（或默认色），不是“空心” - 设
color: transparent后字体变看不见 → 检查是否漏写了-webkit-text-stroke（透明 + 无描边 = 完全隐形） - 在深色背景上用浅色描边但
color: white→ 实际是“白字+白边”，视觉上描边被吞没
不支持 -webkit-text-stroke 的浏览器怎么办
Firefox 或某些国产内核浏览器可能跳过该属性，fallback 方案要轻量、不破坏结构：
立即学习“前端免费学习笔记（深入）”；
- 用
text-shadow模拟单色描边：text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000→ 缺点：描边不均匀，小字号易锯齿，性能略差 - 用 SVG
<text></text>替代纯文本节点：<text stroke="#000" stroke-width="2" fill="white">标题</text>→ 优点：矢量、精准、跨浏览器；缺点：无法继承父级字体设置，SEO 和可访问性需额外处理 - 避免用伪元素叠加模拟多色描边做 fallback —— 这会显著增加渲染开销，且在低配设备上卡顿
真正容易被忽略的是描边宽度与字体大小的比例关系：2px 描边在 14px 正文里会糊成一团，在 60px 标题里才清晰。别硬套设计稿数值，得按 em 或视口单位动态缩放。
