-webkit-text-stroke仅webkit内核支持，firefox完全不支持；必须配color: transparent才可见描边，否则被前景色覆盖；可用8方向text-shadow模拟兼容描边，@supports(-webkit-text-stroke:1px #000)检测更可靠。
-webkit-text-stroke 不是跨浏览器方案，Firefox 完全不支持，也不能只写 text-stroke —— 那个属性根本不存在，所有浏览器都会忽略。
为什么 -webkit-text-stroke 必须配 color: transparent？
描边绘制在文字轮廓上，不是“围住”文字的边框。如果 color 是实色（比如 color: #333），描边会被前景色完全盖住，看起来就像没加。
- 想保留填充色 + 描边双显：用
color: #fff+-webkit-text-stroke: 1.5px #000，但描边过粗时边缘易糊 - 想纯描边（空心字）：必须写
color: transparent或-webkit-text-fill-color: transparent - Safari 对
transparent渲染略偏暗，实际不是纯透，小字号下可能显灰
text-shadow 模拟描边时，4 方向 vs 8 方向怎么选？
只写上下左右 4 个方向（如 -1px 0 0 #000, 1px 0 0 #000）会在斜线连接处（“W”、“X”、“N”）露白，形成断点。
- 小字号（≤16px）或要求快速渲染：用 4 方向 + 中间层，例如：
text-shadow: 0 0 0 #000, -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000 - 常规标题（≥24px）、需视觉均匀：必须上 8 方向，偏移量统一为 ±1px 或 ±2px
- 所有
text-shadow的blur-radius必须为0，调大它只会变虚边，不是描边
如何用 @supports 安全降级，而不是靠 UA 判断？
别写 JavaScript 检测是不是 Chrome，@supports 能直接问浏览器“你支不支持这个能力”，更可靠、更轻量。
- 错误写法：
@supports (text-stroke: 1px #000)—— 这个属性不存在，检测永远失败 - 正确写法：
@supports (-webkit-text-stroke: 1px #000)，Chrome/Safari/新版 Edge 返回 true，Firefox 返回 false - 推荐结构：先写
text-shadow版本作为兜底；再用@supports块覆盖，里面设-webkit-text-stroke并清空text-shadow - 旧版 Safari（如 iOS 15.2）对小数像素（如
1.5px）会四舍五入，导致描边消失，建议优先用整数像素
描边宽度超过 2px 就容易发虚或锯齿，尤其在非 Retina 屏、缩放非 100% 或小字号场景下；真要粗描边或渐变描边，SVG 的 <text stroke="..."></text> 才是可控性最高的方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
