border-radius过渡必须统一用百分比值且宽高相等，显式声明transition属性，配合overflow: hidden和合理缓动才能实现稳定圆角动画。
border-radius 从矩形到圆形过渡必须用百分比值
直接写 border-radius: 0px → 50% 看似合理，但浏览器在计算时会因单位不一致跳过过渡。起始值和结束值必须同为可计算的数值类型，且推荐统一用 % —— 因为 50% 是唯一能稳定生成正圆的语义化写法（前提是宽高等值）。
常见错误包括：
- 起始用
0（无单位），结束用50%→ 浏览器拒绝动画 - 起始用
4px，结束用50%→ 单位混用，过渡失效或卡顿 - 元素宽高不等（如
200px × 100px）却设border-radius: 50%→ 得到椭圆角，不是视觉预期的“变圆”
正确做法是：固定宽高相等 + 起始也用 % 值，例如：border-radius: 10% → border-radius: 50%。
transition 必须显式声明 border-radius，不能依赖 all
transition: all 0.3s 看起来省事，但实际中容易导致意外重绘、性能抖动，甚至在某些浏览器（如旧版 Safari）里让 border-radius 过渡完全不触发。原因在于 all 会尝试监听所有可动画属性，而部分属性（如 box-shadow 或 background-position）可能干扰渲染管线。
应始终显式锁定目标属性：
- 写成
transition: border-radius 0.3s ease-in-out - 时间建议 0.2s–0.4s：太短感知不到变化，太长显得迟滞
- 缓动函数优先选
ease-in-out或自定义cubic-bezier(0.34, 1.56, 0.64, 1)，比默认ease更饱满
hover 或 class 切换时圆角跳变，大概率是 overflow 或 box-shadow 搞的鬼
即使 border-radius 和 transition 都写对了，仍可能看到“闪一下再变圆”或“阴影没跟着裁剪”。这不是动画问题，而是渲染层叠行为被忽略：
- 父容器没设
overflow: hidden→ 子元素圆角生效，但内容（比如图片、文字）溢出直角区域，造成视觉割裂 - 用了
box-shadow但没加inset或没包裹在overflow: hidden容器里 → 阴影保持方形，和圆角不同步 - 元素有
transform: scale()同时又设了border-radius→ Safari 15–16 下易出现圆角锯齿，此时应改用clip-path: border-box兜底
最简验证方式：临时删掉 box-shadow 和 transform，只留 border-radius + transition，看是否平滑。如果恢复了，就说明是组合属性干扰。
想让“变圆”更明显？别只调 border-radius
纯 border-radius 过渡在小尺寸元素（比如 32×32px 图标）上容易感知弱——人眼对微小曲率变化不敏感。这时可以叠加轻量级视觉提示：
- 配合
transform: scale(1.02)在 hover 时轻微放大，强化状态变更感 - 同步调整
box-shadow的模糊半径（如从4px→8px），增强立体反馈 - 若用于头像类场景，确保
img外层容器设overflow: hidden，否则图片边缘会突破圆角
真正难的不是让圆角动起来，而是让动的过程在各种设备、DPI、缩放比例下都保持一致——这需要你主动控制宽高比、单位类型和渲染上下文，而不是依赖浏览器自动推断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
