border-radius过渡卡顿的根本原因是浏览器插值计算圆角时需重绘整个渲染路径，尤其涉及贝塞尔曲线中间态导致cpu负担高；用clip-path替代是最稳妥的性能提升方式。
border-radius 过渡卡顿的根本原因
不是你写错了，而是浏览器在插值计算圆角时要重绘整个渲染路径——尤其是涉及贝塞尔曲线的中间态，CPU 负担高。当元素带 box-shadow、background-image 或 filter 时，卡顿更明显；小屏设备或旧版 Safari 上还容易掉帧甚至跳变。
用 clip-path 替代 border-radius 做动画
这是目前最稳妥的性能提升方式，因为 clip-path 动画走 GPU 裁剪通道，不改变几何结构，兼容性也已成熟（Chrome/Firefox/Edge ≥100，Safari ≥iOS 16.4/macOS 13.3）。
-
inset()的round值必须是像素或rem，不能用百分比 - 示例写法：
.smooth-round {<br> clip-path: inset(0 round 0);<br> transition: clip-path 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);<br>}<br>.smooth-round.rounded {<br> clip-path: inset(0 round 12px);<br>} - 若需圆形效果，可用
clip-path: circle(50% at center)，但注意宽高必须相等，否则会椭圆
坚持用 border-radius？这些细节决定是否掉帧
如果业务强依赖 border-radius（比如需要语义化圆角、适配旧环境），必须守住这几条线：
- 始终用 4 值写法：
border-radius: 8px 8px 0 0→border-radius: 0 0 12px 12px，避免从单值切多值 - 禁用
transition: all，只写transition: border-radius 0.3s ease-out - 加
will-change: border-radius前先确认该元素确实频繁动画，否则反而触发多余图层合成 - JS 触发时，严禁在 class 切换后立刻读取
offsetWidth或getComputedStyle()，这会强制同步布局，直接打断过渡
小尺寸元素的圆角动画特别难感知
按钮、图标这类小元素上，border-radius: 2px → 4px 几乎看不出变化，还容易因插值抖动显得“抽搐”。
- 把起点设为
0，终点设为明确目标值，比如border-radius: 0 → 8px - 搭配轻微
transform: scale(0.98)或opacity变化，让反馈更立体 - 移动端建议过渡时间拉长到
0.35s，并用cubic-bezier(0.22, 0.61, 0.36, 1)把变化集中在后半段，视觉更果断
clip-path 的 inset(round) 在 Safari 中曾长期不支持——这些点一旦漏掉，调半天也白搭。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
