伪元素+transform动画是边框顺时针绘制的本质，即用四个定位伪元素模拟四段线段，通过scalex/scaley按序缩放实现顺时针描边效果，而非直接操作border属性。
边框顺时针绘制的本质是伪元素+transform动画
纯CSS无法直接“绘制”边框，所谓“顺时针绘制”实际是用四个独立的伪元素（::before 和 ::after 配合定位）模拟四段线段，再通过 transform: scaleX() 或 transform: scaleY() 控制显隐，并按顺序触发动画。关键不是边框本身，而是用 border 属性做不到逐边控制起止点，必须换思路。
- 不能用
border+clip-path模拟：多数浏览器对clip-path动画支持差，且顺时针顺序难精准控制 - 推荐结构：一个容器 +
::before（上边）、::after（右边），再加两个额外伪元素或用div子元素处理下、左边（因单个元素只有两个伪元素可用） - 动画触发必须用
:hover，且四段动画需设置不同delay实现顺时针节奏，例如上(0s) → 右(0.2s) → 下(0.4s) → 左(0.6s)
四段线段的定位与缩放动画写法
每段线本质是一个窄矩形（如 height: 2px 或 width: 2px），初始 transform: scaleX(0) 或 scaleY(0)，hover 时恢复为 scaleX(1)。注意 transform 原点要设为起点，否则缩放中心偏移会导致“甩出去”。
- 上线：
top: 0; left: 0; width: 100%; height: 2px;，transform-origin: left;，动画用scaleX - 右边：
top: 0; right: 0; width: 2px; height: 100%;，transform-origin: top;，动画用scaleY - 下边：
bottom: 0; left: 0; width: 100%; height: 2px;，transform-origin: right;（从右往左画），用scaleX并设transform: scaleX(0) translateX(100%)初始态 - 左边：
top: 0; left: 0; width: 2px; height: 100%;，transform-origin: bottom;（从下往上画），初始transform: scaleY(0) translateY(100%)
常见卡点：动画不连贯或方向错乱
最常出问题的是 transform-origin 和初始 transform 不匹配，导致某一段“反向生长”或“跳变”。另一个坑是没重置 transition 的 timing-function，默认 ease 会让起始加速不自然，建议统一用 linear。
- 错误示例：
transform-origin: center用于边线 → 缩放从中点开始，看起来像两边同时展开 - 遗漏
transform-box: border-box→ 如果容器有 padding/border，transform 原点可能偏移 - hover 离开时反向动画失效 → 必须给所有 hover 状态下的伪元素显式声明
transition，不能只写在 hover 入场里 - 移动端 touch 设备无 :hover → 若需兼容，得额外加 class 控制，纯 CSS 无法自动 fallback
性能提醒：避免 layout thrashing 和过度渲染
每个伪元素都是独立渲染层，四段线+容器共5个元素。若页面内大量使用该效果，会触发频繁重排重绘。Chrome DevTools 的 Rendering 面板打开“Paint flashing”能直观看到闪烁区域。
- 务必加
will-change: transform到伪元素上（仅 hover 时加，避免常驻消耗） - 避免用
top/left/bottom/right配合百分比定位 → 改用inset（更现代，部分浏览器优化更好） - 不要用
box-shadow模拟边框 → 它无法做精确缩放动画，且模糊半径会干扰线条清晰度 - 如果只需要简单“描边感”，考虑 SVG
<path></path>+stroke-dasharray+stroke-dashoffset更轻量、更可控
真正麻烦的不是写出来，而是让四段动画严丝合缝接上——毫秒级 delay 差异、transform-origin 偏移一个像素、甚至 subpixel 渲染都可能导致断点。调的时候放大 500%，盯着第一帧和最后一帧看。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
