border-radius 过渡失效主因是起始/结束值结构不一致（如10px 20px→0）、单位混用（10px 50%→0）、overflow:hidden裁剪异常、Safari旧版渲染毛刺；应统一参数格式、用CSS变量控制、显式声明transition、避免JS同步读取阻塞动画。
transition 作用在 border-radius 上为什么没反应
常见错误是直接写 transition: all 0.3s，但实际中 border-radius 的过渡失效往往不是因为写法错，而是因为起始值或目标值不合法。比如从 border-radius: 50% 切到 0 是能过渡的，但从 border-radius: 10px 20px 切到 0 就可能卡顿甚至跳变——浏览器无法插值不同数量的圆角参数。
- 确保起始和结束的
border-radius值结构一致：都用单值（如10px）、双值（10px 20px）或四值（10px 20px 30px 40px） - 避免混用单位，比如
border-radius: 10px 50%→0，这种组合值无法线性插值 - 如果元素有
overflow: hidden，且内部内容溢出，圆角过渡时可能出现闪烁或裁剪异常，这是渲染层限制，不是 CSS 写错了
用 CSS 变量 + transition 实现可控圆角切换
硬编码两个固定状态（比如全圆角 ↔ 全直角）容易维护，但一旦要支持中间态（比如 30% 圆角）、响应式变化或 JS 动态控制，就得靠 --radius 这类自定义属性。它让过渡真正“可编程”。
- 必须显式声明
transition: border-radius 0.3s ease，不能只依赖all -
border-radius不支持calc()在过渡中实时计算，所以变量得提前算好，比如border-radius: var(--radius)，而--radius由 JS 或媒体查询设置 - 在 Safari 15.4 之前，
border-radius的 transition 有渲染毛刺，加transform: translateZ(0)可强制 GPU 加速缓解
button {
--radius: 8px;
border-radius: var(--radius);
transition: border-radius 0.25s cubic-bezier(0.33, 1, 0.68, 1);
}
button.flat { --radius: 0; }
JavaScript 触发圆角过渡时的 timing 陷阱
用 JS 改 class 或 style 后立刻读取 offsetHeight 强制重排，再改回原状——这种“重排闪避”技巧在圆角过渡里反而会打断动画帧。浏览器需要完整的样式计算+布局+绘制流水线，中间插入同步读取，常导致第一帧丢失。
- 不要在 class 切换后立即调用
getComputedStyle(el).borderRadius，这会阻塞过渡启动 - 想等过渡结束？监听
transitionend事件，但注意：border-radius变化触发的是property-name为border-radius的事件，不是all - 多个圆角值（如
10px 20px 30px 40px）变更时，transitionend只触发一次，不是每个角各一次
移动端圆角过渡的兼容性现实
iOS 16.4 之前，Safari 对 border-radius 的 transition 支持不稳定，尤其当元素同时有 backdrop-filter 或 clip-path 时，圆角动画会直接降级为跳变。这不是 bug，是 WebKit 渲染管线对复合图层的保守策略。
立即学习“前端免费学习笔记（深入）”；
- Android Chrome 一般没问题，但低端机上超过 3 个元素同时过渡
border-radius，帧率可能掉到 30fps 以下 - 如果用
clip-path: polygon()模拟圆角再过渡，虽然更可控，但性能比原生border-radius差一截，且不支持 antialiasing - 真要保底，就别过渡，用
transform: scale(0.99)配合 opacity 微调视觉节奏，人眼几乎察觉不到直角突变
border-radius 和 transition 后面。稍不注意，过渡就变成“闪一下再跳过去”。 
