text-stroke 本身不支持 transition
直接给 text-stroke-width 加 transition 不会生效，因为该属性不属于 CSS 动画属性列表（CSS Animatable Properties），浏览器根本不监听它的变化。你看到的“没反应”，不是写法错，是标准就不支持。
常见错误现象：transition: text-stroke-width 0.3s; 写了但完全不动；或者搭配 text-stroke-color 一起过渡，结果只有颜色动、宽度卡死。
- 使用场景：按钮悬停时文字边框变粗、标题入场时描边从细到粗、数据标签强调态切换
- 根本原因：CSS 规范中
text-stroke-width被标记为 non-animatable，连animation也一样无效 - 兼容性影响：所有主流浏览器（Chrome/Firefox/Safari）均不支持，不是某一家的 bug
用 text-shadow 模拟可过渡的“描边”
这是目前最稳定、兼容性最好、且真正能做平滑过渡的替代方案。原理是用多层相同偏移的 text-shadow 叠加出类似描边的效果，而 text-shadow 的 blur-radius 和 spread-radius（后者仅 Safari 支持）虽不能直接控制粗细，但可以用 blur-radius + 多层 shadow 控制视觉厚度，并通过 transition 过渡 text-shadow 整体值。
实操建议：
- 单层
text-shadow: 0 0 1px #000;是最细描边，0 0 2px #000就更厚——blur-radius增大，视觉上边框“发虚变宽” - 要更扎实的描边感，叠加 4 个方向：
text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000;，此时可过渡text-shadow整体（注意必须写全，不能只改 blur） - Firefox 对多方向 shadow 的过渡支持最稳；Chrome 在 blur-radius 变化时有轻微闪烁，可加
will-change: text-shadow;缓解 - 别用
spread-radius（text-shadow: 0 0 0 1px #000），Safari 之外基本不支持，且无法过渡
需要真·硬边描边？用 SVG + stroke
如果设计要求描边必须是清晰锐利的像素级边缘（比如图标文字、高精度 UI 标签），text-shadow 的模糊本质就不可接受。这时得脱离 HTML 文本流，改用 SVG 的 <text></text> 元素配合 stroke 和 stroke-width。
stroke-width 是可动画属性，transition 和 @keyframes 都能直接用：
svg text {
fill: #333;
stroke: #000;
stroke-width: 1;
transition: stroke-width 0.25s ease;
}
svg text:hover {
stroke-width: 3;
}
注意点：
- SVG
<text></text>不继承父级 font 设置，必须显式声明font-family、font-size、line-height（用dominant-baseline控制对齐） - IE 不支持
stroke在文本上的渲染（已淘汰，但若需兼容旧内网系统就得绕开） - 响应式排版下，
stroke-width是绝对像素值，缩放时不会自动适配；可用vector-effect: non-scaling-stroke锁定描边粗细（但仅 Chrome/Edge 支持）
为什么不用 -webkit-text-stroke + JS 强制重绘
有人试过用 JS 改 -webkit-text-stroke-width 后触发 offsetHeight 强制回流，再设新值，试图“骗”出过渡。这方法不仅不可靠，而且问题集中：
- 每次修改都触发同步 layout，频繁操作会导致严重卡顿，尤其在滚动容器里
- 不同浏览器对
-webkit-text-stroke的重绘时机不一致，Firefox 完全无视该私有属性 - 无法与 CSS
transition衔接，只能手写requestAnimationFrame，代码量和维护成本远超用text-shadow或 SVG - 描边颜色若带透明度（如
rgba(0,0,0,0.5)），WebKit 渲染有混合偏差，和设计稿对不上
真正难的不是让宽度“动起来”，而是动得自然、不掉帧、不破设计一致性。选 text-shadow 还是 SVG，取决于你要的是“看起来像描边”还是“就是描边”——前者快准稳，后者真可控，但得多管一层渲染上下文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
