border-radius 动画必须配合 transition 才生效，推荐精确声明 transition: border-radius 0.3s ease，避免 all 和 0s；用百分比值、偶数宽高、统一四角、cubic-bezier 缓动及 focus-within 或 JS 替代 hover。
border-radius 动画必须配 transition 才生效
单独改 border-radius 值不会动，浏览器默认不触发重绘动画。必须显式声明 transition，且目标属性要写对——不能只写 transition: all 0.3s，否则在某些浏览器（如旧版 Safari）里可能失效。
推荐写法是精确指定属性：transition: border-radius 0.3s ease。如果同时想动其他属性（比如背景色），就用逗号分隔：transition: border-radius 0.3s, background-color 0.2s。
- 别漏掉时间值：
transition-duration为0s或未声明，动画直接跳变 - 百分比值比像素值更稳：例如从
border-radius: 4px→50%，比4px→50px更可靠，尤其在宽高不等或响应式场景下 - 所有四个角必须统一变化：若只设
border-top-left-radius，得单独写transition: border-top-left-radius 0.3s，否则不动
hover 触发圆角动画时常见抖动问题
鼠标移入瞬间圆角“闪一下”或边缘锯齿，通常是因为起始/结束状态的渲染精度不一致。比如元素宽高不是偶数、或用了非整数 border-radius 像素值（如 7.5px），浏览器在 subpixel 渲染时容易抖。
解决办法很直接：
立即学习“前端免费学习笔记（深入）”；
- 确保容器宽高相等且为偶数（如
width: 80px; height: 80px），再用border-radius: 50%得到真圆 - 避免混合单位：不要
border-radius: 10px 50% 10px 50%这种写法，四角类型不一致易导致过渡不连贯 - 加
will-change: border-radius提前提示浏览器该属性会变，减少重排开销（但别滥用，仅在频繁动画的组件上加）
cubic-bezier 缓动让圆角动画更自然
默认 ease 在圆角变化中常显得“开头猛、结尾拖”，尤其从方变圆时。用贝塞尔曲线能压住初段速度、强化收尾张力。
比如这个常用组合：transition: border-radius 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)，它比 ease-in-out 更柔和，适合头像呼吸缩放类效果。
-
cubic-bezier(0.42, 0, 0.58, 1)是 MDN 推荐的“标准缓动”，兼容性好，可作保底 - 别用
linear做圆角动画——机械感太强，人眼明显感觉“硬切” - 动画时长建议 0.3s–0.5s：短于 0.2s 用户感知不到过渡，长于 0.6s 显得迟滞
移动端 hover 不生效？改用 focus-within 或 JS 模拟
真机上没有 hover，:hover 伪类基本无效（iOS Safari 点击后短暂触发一次，不可靠）。如果目标是点击展开/收起圆角（比如折叠面板），得换触发方式。
纯 CSS 方案可用 :focus-within 配合隐藏 checkbox：
.toggle-wrapper {
border-radius: 8px;
transition: border-radius 0.3s;
}
.toggle-wrapper:focus-within {
border-radius: 50%;
}
input[type="checkbox"] { display: none; }
label[for="toggle"] { cursor: pointer; }
或者更稳妥的做法：监听 click 事件，切换 class，由 JS 控制 is-rounded 类增删——毕竟圆角动画本身仍是 CSS 驱动，JS 只管开关。
真正难的不是写动画，而是判断什么时候该用 %、什么时候该用 px，以及在不同设备上保持视觉一致性。这些细节不调试个三四轮根本看不出来。
