边框描边动画本质是控制虚线显示节奏：stroke-dasharray设路径总长，stroke-dashoffset控制起始位置；需用getTotalLength()或JS动态计算周长，响应式下须监听resize重算；CSS变量可驱动stroke-dashoffset动画（Chrome110+/Firefox112+支持transition），但@keyframes中var(--offset)无效；SVG推荐显式path而非rect，避免圆角导致dash跳变；Safari性能差时宜改用mask+background-position动画。
用 stroke-dasharray 和 stroke-dashoffset 实现边框描边动画
SVG 或伪元素模拟的边框动画，本质是把边框“画出来”的过程可视化。关键不是改颜色或宽度，而是控制虚线的显示节奏——stroke-dasharray 定义虚线长度+间隙，stroke-dashoffset 决定从哪开始画。比如一个周长为 100px 的矩形边框，设 stroke-dasharray: 100 就是整条实线；再加 stroke-dashoffset: 100，相当于把起点往右推了 100px，看起来就是完全隐藏；动画就是让 offset 从 100 变到 0。
- 必须先用
getTotalLength()（SVG）或 JS 计算元素周长，硬写数值容易错位 - 伪元素方案里，
border无法直接 dash，得用background+linear-gradient模拟，或改用outline+clip-path - 动画中若边框宽高变化（比如响应式缩放），静态 dasharray 值会失准，得监听 resize 重算
用 CSS 自定义属性驱动 dashoffset 动画
CSS 变量本身不能直接参与 @keyframes，但可以靠 transition 或 animation 配合 calc() 绕过限制。常见做法是把变量绑定到伪元素的 transform 或 background-position，间接影响视觉偏移感；更直接的是用 animation 改变变量值，再在属性中引用它——前提是目标属性支持 CSS 变量（stroke-dashoffset 支持）。
- 写法示例：
button { --offset: 100; stroke-dashoffset: calc(var(--offset) * 1px); } button:hover { --offset: 0; transition: --offset 0.4s ease; } - 注意：Chrome 110+、Firefox 112+ 才支持自定义属性在
transition中触发重绘，旧版需 fallback 到 JS 控制 class - 不要在
@keyframes里直接写stroke-dashoffset: var(--offset)——它不会随变量变化重播动画，只会取初始值
为什么 dasharray 设成周长后动画仍不匀速？
因为描边路径不是理想直线，SVG 路径有圆角、曲线段，浏览器计算 getTotalLength() 是按几何路径积分，而 stroke-dasharray 是线性映射。尤其当边框含 border-radius 时，伪元素模拟的“边框”实际是四个矩形拼接，周长 ≠ 真实描边路径长，导致 dash 效果卡顿或跳变。
- 纯 CSS 方案推荐放弃
border，改用clip-path: inset(0)+background渐变做动态外边框 - SVG 方案务必用
<path d="M...Z">显式定义闭合路径，别依赖<rect>的默认渲染，否则圆角处 dash 行为不可控 - 调试技巧：临时加
stroke: red+stroke-width: 2，肉眼观察 dash 是否贴合路径边缘
移动端 Safari 的 dashoffset 动画掉帧严重怎么办？
Safari 对 SVG 属性动画优化差，尤其配合 transform 或 opacity 复合动画时，stroke-dashoffset 更新常被节流到 30fps 以下。这不是写法错，是渲染管线限制。
立即学习“前端免费学习笔记（深入）”；
- 优先用
will-change: stroke-dashoffset提前声明，但仅对固定尺寸 SVG 有效，响应式场景慎用（内存泄漏风险） - 更稳的解法：改用
mask+linear-gradient动画遮罩层，把“画边框”转成“漏出边框”，Safari 对 background-position 动画优化更好 - 避免在 scroll 事件里频繁更新变量值，改用
IntersectionObserver或requestAnimationFrame节流
CSS 变量控制动画的核心约束就一条：它只负责传值，不负责调度。真正决定是否重绘、何时重绘、重绘多快的，是浏览器对那个具体属性的支持程度和当前上下文——这点在 Safari 和老 Android Webview 上特别明显。
