边框滑动按钮
边框滑动按钮：默认只有一条边线，悬停时“描边”像被笔画完一样从某个角出发顺时针走一圈。实现技巧是上下左右四条边用伪元素或独立 span，分别控制 width/height 从 0 到满。
纯 CSS 方案：用 ::before/::after 各管两条边（一个管上+右、一个管下+左），通过 transition-delay 控制先后顺序，形成连贯的描边动画。
- 四条边分两组（::before / ::after），各负责相邻两条边
- 位置定位：top/left 从 0 沿一个方向“长出来”
- 通过 transition-delay 排出先后：上 → 右 → 下 → 左
HTML
<style> .draw { position: relative; display: block; width: 200px; margin: 50px auto; padding: 16px 0; text-align: center; color: #4a9eff; border: none; background: transparent; font-size: 16px; cursor: pointer; } .draw::before, .draw::after { content: ""; position: absolute; width: 0; height: 0; border: 2px solid #4a9eff; box-sizing: border-box; transition: width .3s ease, height .3s ease; } .draw::before { top: -2px; left: -2px; border-right: none; border-bottom: none; } .draw::after { bottom: -2px; right: -2px; border-left: none; border-top: none; } .draw:hover::before { width: calc(100% + 4px); height: calc(100% + 4px); } .draw:hover::after { width: calc(100% + 4px); height: calc(100% + 4px); transition-delay: .3s; } </style> <button class="draw">悬停描边</button>
本节要点描边按钮：两个伪元素分管四条边，delay 接力形成“走一圈”的笔画感。
