text-stroke 不能直接用，它是 -webkit-text-stroke 的别名，仅 Chrome/Edge/Safari 支持，Firefox 完全不支持；必须写 -webkit-text-stroke 并设置 color 回退值，否则文字可能不可见。
text-stroke 在 Chrome/Firefox 中能直接用吗
不能直接用，text-stroke 不是独立 CSS 属性，而是 -webkit-text-stroke 的别名，仅在 WebKit/Blink 内核浏览器（Chrome、Edge、Safari）中生效，Firefox 完全不支持。
常见错误现象：text-stroke: 2px red 写了但没效果，或者只在 Safari 看得见，在 Firefox 里文字直接变透明或消失——这是因为漏写了 -webkit- 前缀，且没给 color 回退值。
- 必须写成
-webkit-text-stroke: 2px red - 必须同时设置
color，否则文字可能不可见（描边会盖住填充色，若color: transparent又没 fallback，就真看不见了） - Firefox 下需用
text-shadow模拟，或改用 SVG 文字
用 text-shadow 模拟描边的可靠写法
text-shadow 是跨浏览器方案，但手动写 8 个方向阴影容易漏、性能差、边缘发虚。关键不是“多写几个”，而是控制偏移和模糊半径的组合逻辑。
使用场景：需要兼容 Firefox、旧版 Edge 或希望更精细控制描边软硬程度时。
立即学习“前端免费学习笔记（深入）”；
- 最简可用写法：
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000（4 方向无模糊，硬边） - 要更平滑，把
0换成0.5px，但注意模糊值过大会让文字变糊，尤其小字号时 - 避免写
0 0 2px #000这种中心模糊——它不是描边，是发光，边缘不清晰 - 性能影响：超过 6 个
text-shadow值可能触发重绘变慢，尤其动画中
描边 + 透明文字的坑：color: transparent 为什么有时失效
很多人想实现“空心字”，于是设 color: transparent + -webkit-text-stroke，结果在 Safari 16.4+ 或某些 Chrome 版本里文字完全消失。
原因：部分新版本浏览器对 transparent 和描边的合成逻辑做了调整，底层渲染把透明填充当作“无内容”，导致描边也被裁掉。
- 安全写法是用极低 alpha 的颜色替代，比如
color: rgba(0,0,0,0.001) - 或改用
background-clip: text+-webkit-background-clip: text配合背景渐变，但这就脱离描边本质了 - 如果必须用
transparent，务必在目标浏览器上实测，不能只信文档
响应式描边怎么保持粗细一致
描边宽度用 px 在缩放或不同 DPR 设备下会失真；用 em 或 rem 又会随字体大小缩放——这不是 bug，是设计使然，但常被忽略。
性能 / 兼容性影响：用 vmin 或 clamp() 控制描边宽度，可缓解但无法根治；真正稳定的方式是 JS 监听 font-size 变化后动态计算，不过多数项目没必要这么重。
- 常规方案：描边宽度设为字体大小的 5%~8%，例如
font-size: 20px; -webkit-text-stroke: 0.06em #333 - 避免用
px描边配rem字体——缩放时描边会“卡住”不动，显得越来越细 - 移动端高 DPR 屏幕下，
1px描边实际可能只有 0.5 物理像素，视觉上发虚，此时宁可设1.5px或用transform: scale(1.5)微调
