border-radius动画必须用transition而非@keyframes，因浏览器不支持其CSS动画优化；需用具体数值、统一四角写法，并避免:hover依赖移动端失效。
border-radius 动画必须用 transition，不能用 animation 关键帧
直接写 @keyframes 改 border-radius 会失效或卡顿——因为多数浏览器不支持该属性的 CSS 动画重绘优化，只有 transition 能触发硬件加速路径。实际生效的前提是：起始和结束值都得是具体数值（比如 4px → 50%），不能混用 em/rem 或 calc()（部分浏览器解析不稳定）。
- ✅ 推荐写法：
transition: border-radius 0.3s ease; - ❌ 避免写法：
transition: all 0.3s;（可能意外触发其他属性重排） - ⚠️ 注意：如果父容器有
overflow: hidden，圆角变化时内容裁剪边界不会“渐变”，而是突变——这是渲染限制，不是代码问题
:hover 中 border-radius 值要可计算、可插值
border-radius 的四个角（top-left、top-right 等）必须一一对应，否则过渡会退化为“跳变”。比如从 border-radius: 8px 到 border-radius: 50% 0 0 50%，浏览器无法线性插值，结果是第一帧就切到目标值，动画消失。
- ✅ 安全写法：统一用单值（
4px→24px）或四值（4px 8px 12px 16px→24px 24px 24px 24px） - ❌ 危险写法：
border-radius: 4px→border-radius: 50% / 10px（斜杠语法不参与过渡） - ? 小技巧：用
CSS custom property控制数值，方便调试：--radius: 4px;，然后border-radius: var(--radius);
移动端 hover 不触发？别依赖 :hover 做核心交互
在 iOS Safari 和多数安卓 WebView 中，:hover 只在模拟鼠标指针存在时才生效（比如带触控笔的 iPad），纯手指点击默认不触发。这意味着靠 :hover 实现的圆角动画，在手机上大概率静默失败。
- ✅ 替代方案：用
:active+transition模拟按压反馈（适合按钮类元素） - ✅ 更可靠方案：用 JavaScript 监听
touchstart/mouseenter，切换 class 触发动画 - ⚠️ 注意：加了
cursor: pointer并不能让 iOS 触发:hover，只是视觉提示
性能陷阱：border-radius 过渡太慢或卡顿的真正原因
看起来只是改个圆角，但实际触发的是 Layout → Paint → Composite 全流程。尤其当元素有阴影（box-shadow）、背景渐变或内部内容复杂时，每一帧都要重绘整个区域。
立即学习“前端免费学习笔记（深入）”；
- ✅ 优化方向：给动画元素加
will-change: border-radius;（仅在需要时加，别滥用） - ✅ 更稳妥做法：用
transform: scale()配合overflow: hidden模拟“变圆”效果，性能好得多 - ⚠️ 别踩坑：不要在
position: fixed或transform元素上叠加大量border-radius过渡——合成层管理容易混乱
:hover 的行为差异最容易被当成 bug 反复调试。 
