border-radius过渡需同时满足三项条件才能生效：元素设为block或inline-block、显式设置宽高、父容器或自身加overflow:hidden。
border-radius 本身支持 CSS 过渡，但直接写 transition: border-radius 0.3s 很容易失效——不是浏览器不认，而是多数情况下你没给它“可变的空间”。
为什么 border-radius 过渡经常不动
常见现象：鼠标悬停时圆角没变化、动画卡顿、或只在部分浏览器生效。根本原因是：border-radius 的过渡依赖于「两个状态都明确可计算」，而以下情况会打断它：
- 父容器或自身设置了
overflow: visible（默认值），导致浏览器跳过渲染优化，甚至忽略过渡触发 - 元素没有显式宽高（比如
display: inline的span），border-radius百分比值无法稳定解析 - 用了
border-radius: 50%但宽高不等，起始/结束状态的像素值不匹配，浏览器无法插值 - 同时写了
transition: all却没限制属性，某些浏览器会因其他不可过渡属性（如display）静默丢弃整个过渡声明
必须写的三样东西才能让圆角动起来
不是加个 transition 就完事。要让 border-radius 过渡可靠生效，这三项缺一不可：
- 元素得是块级或行内块级：
display: block或display: inline-block，确保盒模型边界清晰 - 必须显式设定宽高（或至少固定一个方向），避免百分比半径在不同状态下解析出不同像素值
- 父容器或自身加
overflow: hidden——这不是为了裁剪，而是强制浏览器启用合成层，让border-radius变化进入 GPU 加速路径；实测 Chrome/Firefox/Safari 均依赖此行为才真正平滑
示例（胶囊按钮悬停变圆）：
立即学习“前端免费学习笔记（深入）”；
.btn {
display: inline-block;
width: 160px;
height: 44px;
border-radius: 22px;
background: #4facfe;
overflow: hidden;
transition: border-radius 0.25s ease;
}
.btn:hover {
border-radius: 50%;
}
用百分比还是像素？看场景选
border-radius 过渡中单位选择直接影响是否“稳”：
- 固定尺寸组件（如图标按钮、头像）：优先用像素值，比如
border-radius: 8px → 50px，无歧义、无重排 - 响应式容器（如卡片、模态框）：可用百分比，但必须确保宽高比例恒定，否则
border-radius: 10% → 30%在缩放时可能因宽高比偏移导致过渡抖动 - 绝对不能混用：比如起始用
border-radius: 12px，结束用border-radius: 50%，浏览器无法建立数值映射，过渡直接退化为“跳变”
移动端点击后圆角回弹延迟？加这行
iOS Safari 和部分安卓 WebView 在触摸交互后，:active 状态释放时 border-radius 过渡常有 100–300ms 滞后，本质是浏览器等待确认是否为长按。解决方法很简单：
- 给元素加
touch-action: manipulation，告诉浏览器“这是点击操作，别等手势” - 同时补一句
-webkit-tap-highlight-color: transparent，避免点击蒙层干扰视觉判断
这个延迟在桌面端几乎不存在，但一旦漏掉，用户在真机上点按钮就会感觉“卡了一下”，特别影响信任感。
