最可靠纯css实现是用clip-path polygon()分四段定义顶点并顺时针旋转放大裁剪区。需设position: relative、全百分比坐标、4个@keyframes、每帧8顶点数一致，避免inset()和混用单位，safari≥15.4兼容佳。
用 clip-path 模拟顺时针边框绘制动画最可靠
纯 CSS 实现“边框顺时针画出”不是真画线，而是用 clip-path 遮罩 + 旋转裁剪区域来模拟视觉效果。直接操作 border 本身无法实现这种路径动画——CSS 的 border 不支持路径控制或分段动画。
关键思路：把一个正方形裁剪区域（初始为 0×0）绕中心顺时针旋转，并逐步放大，让内容区域像被“画出来”一样显露。需配合 transform-origin: center 和 clip-path: polygon() 的动态坐标计算。
实操建议：
- 用
@keyframes定义 4 个关键帧，对应上→右→下→左四段“绘制”，每段用polygon()描述当前可见区域 - 避免用
inset()，它不支持角度控制；必须用polygon()手动写 8 个顶点（例如起始段只显示顶部细条，顶点按顺时针顺序排列） - 动画时长建议 ≥ 0.6s，太快会看不清顺时针方向，太慢显得卡顿
- 元素需设
position: relative，且背景/内容不能溢出，否则裁剪外部分会意外显示
border + transform 组合只能做近似效果
有人尝试用四个伪元素（::before/::after 各两个）分别代表四条边，再逐个 scaleX/scaleY + rotate，但问题明显：
- 右、下边的
transform-origin必须精确设到左上角或右上角，稍有偏差就会位移错位 - 四段动画衔接处有微小间隙或重叠，尤其在非整数像素尺寸下
- 圆角（
border-radius）完全无法跟随动画，因为scale会拉伸圆角弧度 - 不支持
box-shadow同步出现——阴影得额外用第五个伪元素模拟，维护成本陡增
兼容性与性能要注意这些点
clip-path 的 polygon() 动画在 Chrome/Firefox/Safari（v15.4+）中表现良好，但 Safari 旧版本（≤14.1）对 clip-path 关键帧插值支持不稳定，可能出现跳变。
性能方面：
- 避免在
body或滚动容器内大量使用，clip-path动画会触发重绘（repaint），非合成属性 - 若需高性能，可加
will-change: clip-path，但仅在悬停前一刻设置（比如用:hover触发），否则常驻会增加内存开销 - 不要在
transform已有动画的元素上叠加clip-path动画，层叠会导致渲染管线争抢，iOS Safari 容易掉帧
一个最小可用示例（含 fallback）
button {
position: relative;
padding: 12px 24px;
border: none;
background: #fff;
clip-path: polygon(0 0, 0 0, 0 0, 0 0); /* 初始全隐藏 */
transition: clip-path 0.8s cubic-bezier(0.33, 1, 0.68, 1);
}
button:hover {
clip-path: polygon(
0% 0%, 100% 0%, 100% 0%, 100% 0%,
100% 100%, 100% 100%, 100% 100%, 0% 100%
);
}
注意：上面的 polygon() 是简化示意，实际需 8 点分段定义——第一段只放开顶部边（两点横向延伸），第二段加右边界（新增两点向下延伸），依此类推。真正可用代码要拆成 4 个 @keyframes 步骤，且每步顶点数必须一致（补冗余点），否则浏览器插值会错乱。
最易被忽略的是：所有顶点坐标必须用百分比或视口单位，不能混用 px，否则动画在缩放或响应式场景下会偏移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
