核心思路是用遮罩逐步显示边框：clip-path inset() 从 inset(100% 0 0 0) 动画至 inset(0 0 0 0)；SVG 方案用 stroke-dasharray + stroke-dashoffset 模拟描边绘制；伪元素方案通过 transform 移开遮罩层实现兼容性擦除。
用 clip-path 配合动画实现边框擦除效果
核心思路不是“擦除边框”，而是用遮罩把边框逐步显示出来——本质是控制一个矩形区域的可见范围，从无到有露出元素边框。直接操作 border 无法触发逐像素擦除动画，必须借助裁剪。
-
clip-path支持inset()函数，例如inset(0 0 0 0)表示不裁剪，inset(50% 0 0 0)表示裁掉上半部分 - 对带
border的块级元素（如<div>）设置clip-path: inset(100% 0 0 0)初始状态，整个边框被裁掉；再通过transition动画将第一个值从100%降到0%，就形成“从上往下擦出边框”的效果 - 注意：必须给元素设
border，且不能用outline替代——outline不受clip-path影响
div {
width: 200px;
height: 120px;
border: 4px solid #3a86ff;
clip-path: inset(100% 0 0 0);
transition: clip-path 0.6s ease-out;
}
div:hover {
clip-path: inset(0 0 0 0);
}
用 SVG <path> 模拟动态描边擦除
如果需要更精确控制“擦除方向”（比如顺时针绕一圈、或只擦左右两侧），纯 CSS 的 clip-path 就不够灵活。这时应改用 SVG 的 stroke-dasharray + stroke-dashoffset 技术，把边框转为路径描边。
- 先用 SVG
<path>绘制一个与目标区域等大的矩形路径（M 0,0 H 200 V 120 H 0 Z），设置stroke和fill="none" - 计算该路径总长度（可用
getTotalLength()），设为stroke-dasharray值，再设初始stroke-dashoffset等于该长度，使线条完全不可见 - 动画中将
stroke-dashoffset从全长减到0，就实现“描边显现”，视觉上就是边框被“画出来” - 关键点：必须加
vector-effect="non-scaling-stroke"，否则缩放或响应式下边框粗细会变
<svg width="200" height="120" viewBox="0 0 200 120">
<path d="M0,0 H200 V120 H0 Z"
fill="none"
stroke="#3a86ff"
stroke-width="4"
vector-effect="non-scaling-stroke"
stroke-dasharray="640"
stroke-dashoffset="640"
class="border-path"/>
</svg>
<style>
.border-path {
transition: stroke-dashoffset 0.8s ease-in;
}
.border-path:hover {
stroke-dashoffset: 0;
}
</style>
用伪元素 + transform 模拟局部擦除感
当真实擦除效果性能要求高（比如要兼容老版 Safari 或大量元素同时动），可退而求其次：用两个重叠层，上层盖住边框，再用 transform: scaleX() 或 translateX() 移开遮罩层，露出下层已绘好的边框。
- 给容器设
position: relative，内部用::before伪元素绘制完整边框（content: ""+border） - 再用
::after伪元素做黑色遮罩层（background: #000），尺寸略大于容器，覆盖全部边框 - 动画中对
::after执行transform: translateX(-100%)，就像一张黑纸被向左拉开，边框随之“擦出” - 缺点：只能模拟单向擦除（如左→右），且遮罩边缘可能有轻微锯齿；优点是兼容性极好，连 IE11 都能跑
div {
position: relative;
width: 200px;
height: 120px;
}
div::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
border: 4px solid #3a86ff;
}
div::after {
content: "";
position: absolute;
top: -4px; left: -4px; right: -4px; bottom: -4px;
background: #000;
transition: transform 0.7s cubic-bezier(0.33, 1, 0.68, 1);
}
div:hover::after {
transform: translateX(-100%);
}
容易忽略的三个细节
实际项目中，90% 的“擦除不动”问题都出在这几处，不是代码写错，而是环境没配对：
立即学习“前端免费学习笔记（深入）”；
- 元素必须有明确宽高（
width/height或min-width/min-height），否则clip-path: inset()计算基准为空，动画无效 - 使用
clip-path时，若父容器设了overflow: hidden，可能意外截断动画过程中的中间态，建议临时移除或设为visible - SVG 路径的
stroke-dasharray值必须是精确总长度，不能手写估算。务必用 JS 初始化时调用pathEl.getTotalLength()获取并注入 style，否则动画会跳变或卡住
