-webkit-text-stroke 在 Chrome、Safari 和基于 Chromium 的 Edge 中可用，Firefox 完全不支持；需用 text-shadow 模拟或 SVG 实现兼容，且 color 与描边叠加时描边覆盖文字，空心字须设 color: transparent。
text-stroke 在哪些浏览器里能用
text-stroke 是 CSS 的非标准属性（目前仍处于 Editor’s Draft 阶段），实际支持依赖 -webkit-text-stroke 前缀。它在 Chrome、Safari、Edge（基于 Chromium 后）中稳定可用，Firefox 完全不支持——连前缀版本都不认。
这意味着：如果你的项目必须兼容 Firefox，-webkit-text-stroke 单独使用是无效的，得准备降级方案。
- Chrome 时可用
-webkit-text-stroke: 2px #000 - Safari 同样只认
-webkit-前缀版本 - Firefox 会直接忽略该声明，文字按普通样式渲染（无描边）
- 不能写成
text-stroke: 2px #000（无前缀的标准写法当前无效）
描边颜色和粗细怎么设才不出错
-webkit-text-stroke 接收两个值：width 和 color，顺序固定，不能颠倒，也不能只写一个。
- 正确写法：
-webkit-text-stroke: 1.5px #ff6b6b - 错误写法：
-webkit-text-stroke: #ff6b6b（缺宽度，整条声明被丢弃） - 错误写法：
-webkit-text-stroke: 1.5px（缺颜色，同样失效；默认不是 transparent，而是“未定义”，结果不可控） - 宽度支持
px、em、rem，但避免用pt或百分比（渲染不一致）
注意：描边是绘制在文字轮廓上，不是外扩阴影。当描边过粗（如 >4px）且文字本身较细时，容易“吃掉”内部填充色，看起来像实心块——这时需配合 color: transparent 才能显出纯描边效果。
立即学习“前端免费学习笔记（深入）”；
Firefox 兼容不了怎么办
没有原生支持，就只能用替代方案。最常用的是 text-shadow 模拟描边，虽然不够精确，但兼容性拉满（IE9+ 都行）。
- 单层
text-shadow效果弱，建议用 8 个方向的偏移组合：text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, ... - 更稳妥的做法是用 PostCSS 插件（如
postcss-text-stroke）自动补全text-shadow回退代码 - 若需高质量描边（比如图标字体或 SVG 文字），直接改用
<svg><text></text></svg>+stroke属性，完全可控且跨浏览器
别试图用 outline 或 border 模拟——它们作用于盒模型，对内联文本无效，且无法贴合字形轮廓。
描边和文字颜色重叠时的显示逻辑
-webkit-text-stroke 只控制“边”，文字内部颜色由 color 决定。两者叠加时，描边永远在文字上方绘制（视觉上盖住部分文字），不是镂空效果。
- 默认情况：
color: black+-webkit-text-stroke: 2px white→ 黑字白边，边缘清晰 - 想实现“空心字”：必须设
color: transparent，否则描边会被底色盖住一部分 - 半透明描边（如
rgba(0,0,0,0.5)）可行，但 Firefox 下整个声明失效，透明色回退为默认文字色，要特别留意
真正难处理的是中文字体——某些字体（如 “PingFang SC”）字形紧凑，描边稍粗就会让相邻笔画粘连；测试时务必在目标字号、行高、字体栈下实机验证，不能只看设计稿。
