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 时间，而是绕过简写陷阱、选对可插值的属性、并守住重排红线。