能，但需起始值和结束值均为可计算数值（如0px↔12px）、单位一致、正确声明transition且未被覆盖；JS修改时需强制重排或使用requestAnimationFrame避免动画中断。
border-radius 能用 transition 动画吗？
能，但有前提：必须是「可计算的数值」之间切换，比如 0px ↔ 12px、50% ↔ 20%。不能在 0 和 unset、initial 或 inherit 之间过渡——浏览器不知道怎么插值。
transition 不生效的常见原因
多数人卡在这儿，不是写法错，而是触发条件没满足：
-
border-radius的起始值和结束值单位不一致（比如0和10px）；虽然 CSS 允许省略单位为0，但建议统一写成0px避免解析歧义 - 样式被
!important或更高优先级规则覆盖，导致 transition 属性未实际生效 - 容器没有设置
transition: border-radius 0.3s，或写在了错误的选择器层级（比如只写了父元素，没写到目标元素本身） - 用 JS 直接修改
style.borderRadius后立即读取 offsetHeight 等触发重排，打断了 transition 流程（见下一条）
JS 控制圆角变化时的 timing 陷阱
直接赋值再改值，动画常一闪而过——因为浏览器把两次 style 修改合并成一次重绘。正确做法是让第一次写入「落地」后再触发第二次：
element.style.borderRadius = '0px'; // 强制触发重排，确保初始状态被记录 void element.offsetWidth; element.style.borderRadius = '16px';
更稳妥的方式是用 requestAnimationFrame 分帧：
立即学习“前端免费学习笔记（深入）”；
element.style.borderRadius = '0px';
requestAnimationFrame(() => {
element.style.borderRadius = '16px';
});
响应式圆角 + transition 怎么写才不翻车
用百分比或视口单位（如 vw）做圆角时，要注意：浏览器对 % 的解析依赖于盒模型尺寸。如果容器宽高动态变化（比如 flex 子项、图片加载后撑开），border-radius: 50% 可能从椭圆变成正圆，过渡过程会拉扯变形。
- 固定宽高的容器里用
%最稳；否则优先用px或rem - 避免在
border-radius中混用不同单位（如10px / 50%），transition 只对每组值单独插值，容易出意外交错 - 如果需要适配暗色模式或主题切换，别用
@media (prefers-color-scheme: dark)覆盖border-radius——它不触发 transition，得靠 class 切换 + 统一 transition 声明
真正难的不是写出来，是当容器尺寸受外部影响频繁抖动时，border-radius 还能不能保持平滑过渡——这时候得看它是被 layout 触发重算，还是纯 paint 阶段的变化。稍不注意，就变成「看起来在动，其实被强制重绘打断了」。
