border-radius 不支持直接 transition，应改用四个独立半径属性（如 border-top-left-radius）并统一单位；响应式场景可用 CSS 自定义属性 + calc() 配合 transition；避免同时修改 layout 属性或未启用硬件加速导致卡顿。
border-radius 不支持直接 transition
直接给 border-radius 加 transition 看似合理，但多数浏览器（尤其是旧版 Safari 和部分 Android WebView）对它的过渡支持不一致——可能卡顿、跳变，甚至完全不生效。根本原因是 border-radius 是复合属性（可接受 1–4 个值，每个还分水平/垂直），浏览器难以插值计算中间状态。
用单侧独立半径属性替代
改用四个独立的、可动画的 CSS 属性：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius。它们是简单数值（如 px 或 %），浏览器能稳定插值。
- 所有现代浏览器（Chrome 63+、Firefox 66+、Safari 15.4+、Edge 79+）均支持这四个属性的
transition - 避免混用简写和独立写法：不要在同一个元素上既设
border-radius: 8px又设border-top-left-radius: 16px，CSS 优先级可能导致意外覆盖 - 过渡时建议统一单位（全用
px或全用%），混合单位（如10px 20%）可能触发回退到简写逻辑，丢失动画
button {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
transition: border-top-left-radius 0.3s ease,
border-top-right-radius 0.3s ease,
border-bottom-right-radius 0.3s ease,
border-bottom-left-radius 0.3s ease;
}
button:hover {
border-top-left-radius: 12px;
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
border-bottom-left-radius: 12px;
}
需要响应式圆角？用 CSS 自定义属性 + calc()
如果圆角需随容器尺寸动态变化（比如宽度一半），不能直接对 calc(50%) 做过渡——它本身不是可动画值。正确做法是用自定义属性控制基础值，再通过 calc() 组合：
- 定义一个可过渡的 CSS 变量，如
--radius-ratio: 0.1 - 在
border-radius中用calc(var(--radius-ratio) * 100%)计算实际值 - 只对
--radius-ratio设置transition，浏览器能平滑插值该数字
.card {
--radius-ratio: 0.05;
border-radius: calc(var(--radius-ratio) * 100%);
transition: --radius-ratio 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.card:hover {
--radius-ratio: 0.2;
}
动画卡顿或闪动？检查是否触发重排
即使用了独立属性，若元素有 transform: scale() 或 filter 同时变化，可能因层叠上下文或合成策略导致圆角渲染异常。常见表现是 hover 瞬间“锯齿”或边缘撕裂。
立即学习“前端免费学习笔记（深入）”；
- 确保圆角动画期间不同时修改
width/height或padding—— 这会触发 layout，打断 GPU 加速 - 对需要流畅动画的元素，主动开启硬件加速：
will-change: border-radius（仅限必要时，避免滥用） - 在 Safari 上，若仍出现闪烁，尝试加
-webkit-mask-image: linear-gradient(#fff, #fff)强制启用合成层（副作用是可能影响点击穿透，需测试）
真正让 border-radius 动起来的关键，从来不是堆 transition 时间，而是绕过简写陷阱、选对可插值的属性、并守住重排红线。
