svg边框逐帧绘制最稳定，通过stroke-dasharray=”L L”与stroke-dashoffset=”L”（L为周长）配合requestAnimationFrame或css动画递减offset实现；CSS伪方案需多层模拟，canvas则须手动分段路径绘制。
用 stroke-dasharray + stroke-dashoffset 控制 SVG 边框绘制进度
html5 中没有原生“逐帧描边”属性，但 SVG 的路径描边动画是目前最稳定、兼容性最好（IE9+）、且完全可控的方案。核心是把边框转为
关键原理：stroke-dasharray 定义虚线模式（如 "100 100" 表示画 100px、空 100px），设为 "总长 0" 就等效于一条实线；stroke-dashoffset 控制起始绘制位置——初始设为总长，再逐步减到 0，视觉上就是边框从起点开始“画出来”。
- 先用 javaScript 获取目标元素尺寸，计算周长（
rect是2 * (w + h)） - 给
stroke-dasharray="L L"和stroke-dashoffset="L"（L为周长） - 用
requestAnimationFrame或CSS @keyframes递减stroke-dashoffset到 0 - 注意：必须设置
stroke-linecap="round"或"square"，否则拐角处会断开
用 CSS @keyframes 实现纯 HTML 元素的伪逐帧边框
对普通
box-shadow + clip-path 或伪元素分段覆盖来模拟。更实用的是「渐进式 border-width + opacity」组合，虽非真正逐帧，但在多数场景下感知接近。
常见误用：border: 0 → border: 2px solid #000 是跳变，不是逐帧；必须拆解为多个中间状态。
立即学习“前端免费学习笔记（深入）”；
- 用
@keyframes分 8–16 帧，每帧微调border-width和opacity（例如从0 0 0 0到2px） - 配合
transform: scale(0.98)起始态可缓解“突然撑开”感 - 不推荐用
outline模拟——它不占布局空间，且无法做局部描边 - 若需精确时序控制（比如和音频帧同步），必须用 js 驱动，CSS 动画时间精度有限
Canvas 绘制逐帧边框时的时序陷阱
用 canvas.getContext('2d') 手动画矩形边框时，容易误以为 strokeRect() 天然支持逐帧——其实它是一次性绘制。真要“逐帧显现”，得自己拆解四条边，并按毫秒级节奏逐段画线。
const ctx = canvas.getContext('2d'); const w = 200, h = 100; let progress = 0; // 0~4，代表四条边 function drawFrame() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.strokeStyle = '#000'; ctx.lineWidth = 2;
if (progress >= 1) ctx.strokeRect(0, 0, w, 0); // 上边（y=0，高0→实际不显） if (progress >= 2) ctx.strokeRect(w, 0, 0, h); // 右边 if (progress >= 3) ctx.strokeRect(0, h, w, 0); // 下边 if (progress >= 4) ctx.strokeRect(0, 0, 0, h); // 左边
// 更精细：每条边再分 10 段，用 lineTo + stroke 绘制折线段 // …… }
- 直接
strokeRect()无法实现“从左上角开始向右画”的效果，必须用beginPath()+lineTo()构造路径 - Canvas 帧率依赖
requestAnimationFrame，但若逻辑复杂易掉帧，建议预生成路径点数组，只做绘制不计算 - 移动端要注意
devicePixelRatio，未缩放 canvas 会导致线条模糊或错位
为什么不用 CSS transition 直接过渡 border？
因为 border-width、border-color 支持 transition，但 border-style 不支持——而 solid 从 0px 到 2px 的过渡，在大多数浏览器中会先闪一下虚线或点线，尤其在 safari 和旧版 chrome 中明显。
- 实测：设
border: 0 solid #000→border: 2px solid #000，firefox 渲染正常，Safari 会短暂出现dotted干扰态 -
border-image方案更不可靠：各浏览器对border-image-slice解析差异大，且无法做时序控制 - 真正需要“逐帧”而非“缓动”，意味着你可能在做可视化反馈、加载指示或教学演示——这时 SVG 方案的确定性远高于 CSS
边框逐帧显现的本质是路径绘制时序控制，不是样式过渡。别被“html5”字眼带偏——该用 SVG 就用 SVG，该用 Canvas 就用 Canvas，dom 元素的 border 属性天生不适合这件事。