text-stroke 并非 webkit 独占，而是 safari 16.4 前需 -webkit-text-stroke 前缀，chrome/edge 原生支持，firefox 75+ 仅支持带前缀版本；必须同时写两行以兼顾兼容性与未来标准。
text-stroke 在 Chrome/Firefox 中能用，但 Safari 16.4 之前不支持
直接说结论：text-stroke 是 WebKit 独占属性，Chrome 和 Edge（基于 Chromium）可用，Firefox 从 75+ 开始通过 -webkit-text-stroke 前缀支持，但 Safari 直到 16.4 才去掉前缀、原生支持。更早的 Safari（比如 iOS 15.x 或 macOS Monterey）必须写 -webkit-text-stroke，且不能省略前缀。
常见错误现象是：本地开发看着好好的，一换 iPhone 就文字变透明或描边消失——大概率就是 Safari 没加前缀，或者用了没前缀的 text-stroke。
- 必须同时写两行：
-webkit-text-stroke: 2px #333;和text-stroke: 2px #333;（后者为未来兼容） - Firefox 虽支持前缀版，但对
text-stroke-color单独设置有 bug，建议始终用合并写法-webkit-text-stroke: width color - 描边宽度设为
0不会清除效果，要删掉整条声明；设太小（如0.5px）在高 DPI 屏上可能渲染异常
描边 + 填充色组合决定最终可读性
text-stroke 本身不控制文字内部颜色，它只画边框；文字填充由 color 决定。如果填色和描边色对比太弱（比如都用灰色），文字就糊成一团，尤其在小字号或低分辨率屏上。
典型使用场景是「空心字」或「霓虹字」效果，但别忘了用户得看清内容。不是所有设计稿里的效果都能直接搬进生产环境。
- 空心字必备：
color: transparent;+-webkit-text-stroke: 2px #007bff; - 描边+实心字（强调型标题）：
color: #fff;+-webkit-text-stroke: 1px rgba(0,0,0,0.3); - 避免用
color: #000;+-webkit-text-stroke: 1px #fff;做反白描边——在 Windows 高对比度模式下可能完全不可读
和 text-shadow 混用时，图层顺序容易搞错
text-stroke 渲染层级在 color 之上、text-shadow 之下。也就是说，阴影会盖在描边外面，而不是压在描边下面。这和直觉相反，很多人以为描边最外层。
想实现「描边+外发光」效果（比如按钮悬停），得靠多层 text-shadow 模拟，不能依赖描边本身发光。
- 错误写法：
text-shadow: 0 0 4px #ff6b6b;期望它包住描边 → 实际是阴影被描边切掉一部分，边缘毛糙 - 正确思路：不用描边，全用
text-shadow叠出描边感（例如 8 个方向各 1px 同色阴影） - 真要混用，先确认描边宽度够大（≥2px），再用模糊值较小的
text-shadow（如0 0 2px rgba(0,0,0,0.4)）补氛围，否则视觉打架
性能和可访问性风险比看起来更实在
描边本身不卡顿，但一旦搭配 transform: scale() 或动画，WebKit 引擎在重绘描边文字时 CPU 占用明显升高，iOS 上滚动长列表时偶现掉帧。
更大的问题是屏幕阅读器和高对比度模式：部分系统会忽略 color: transparent，导致空心字直接“消失”；Windows 高对比主题下，描边色可能被强制替换成系统强调色，破坏设计预期。
- 带描边的文字尽量别用于正文段落，仅限标题、Logo、装饰性标签
- 如果必须用空心字，加
aria-label或视觉隐藏的备用文本（sr-only类）保底 - 不要对描边文字做 CSS 动画（如
text-stroke-width变化），这个属性根本不是 CSS 动画可过渡属性
描边不是万能 highlight 工具，它本质是视觉糖衣，加之前先问一句：这个信息，用户在没有描边时还能不能准确获取？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
