必须双写-webkit-text-stroke和text-stroke并设color: transparent，因Chrome115+/Firefox119+/Edge116+支持标准版但Safari仍需前缀；描边宽度仅认px等绝对单位，rem/百分比无效；中文建议≤1.5px并加粗防粘连。
直接用 color: transparent + -webkit-text-stroke 就能实现，但只写这一行大概率失效——必须双写前缀版和标准版，且描边宽度不能用 rem 或百分比。
为什么只写 -webkit-text-stroke 没效果
Chrome 115+、Firefox 119+、Edge 116+ 都已原生支持 text-stroke，但 Safari（尤其 iOS）仍依赖 -webkit- 前缀。漏掉任一版本，就会在对应浏览器里退化成实色文字。
- 必须同时声明：
-webkit-text-stroke: 1.5px #000和text-stroke: 1.5px #000 -
color: transparent是硬性前提；用rgba(0,0,0,0)或opacity: 0都不行 - 描边颜色设为
transparent不会镂空，只会让描边“消失”，文字本体仍按默认色渲染
-webkit-text-stroke 的单位和中文适配陷阱
描边宽度只接受绝对单位：px、pt、无单位数值（如 2 等价于 2px），em 虽可计算但结果固定，rem 和百分比直接被忽略。
- 中文/日文等笔画密集字体，描边 ≥ 2px 容易粘连，建议控制在
1.5px以内 - 搭配
font-weight: 700可缓解粘连，提升可读性 - 小字号（如
14px）下，1.5px描边已足够清晰；放大到4rem时需手动调至2px～3px，否则边缘发虚
想填色？别碰 color，用 -webkit-text-fill-color
当你要外圈描边 + 内部实色（比如白边蓝字），不能改 color——它已被 transparent 锁死。此时必须用 WebKit 专属的 -webkit-text-fill-color 单独控制填充色。
立即学习“前端免费学习笔记（深入）”；
- 示例：
color: transparent; -webkit-text-fill-color: #3498db; -webkit-text-stroke: 2px white; -
-webkit-text-fill-color在 Firefox 中完全无效，跨浏览器填色得换background-clip: text方案 - 不要和
text-shadow混用：后者是模糊投影，叠加后边缘毛糙，高清屏下尤其明显
渐变描边和背景图配合的坑
text-stroke 支持 linear-gradient() 作颜色值，但仅限纯色线性渐变（如 to right, red, blue），含透明度过渡或径向渐变会回退为单色。
- 用图片背景时，文字边缘锯齿常见原因是
background-size没配好，建议用cover或200% 200%加background-position: center - 父容器加了
transform或filter，Safari 渲染可能闪白——这是已知渲染层 bug，绕开即可 -
background-clip: text在 Firefox 中至今不支持（2026 年稳定版仍忽略），别指望它跨浏览器生效
真正难的不是写对那几行 CSS，而是判断当前项目要不要为 Firefox 用户降级方案——如果必须兼容，text-stroke 就只能当渐进增强，主逻辑得切到 background-clip + 多层 text-shadow 回退路径。
