border-radius与transition结合可实现圆角平滑动画，如hover时方块变圆形，通过设置transition控制过渡时间、缓动函数及属性范围，避免使用all以减少性能影响，建议保持宽高一致并用50%实现稳定圆形过渡。
在CSS中，border-radius 与 transition 结合可以实现非常平滑的形状动画效果，比如按钮圆角缩放、图片hover变圆形等。关键在于设置过渡属性，让圆角变化过程更自然。
基本用法：hover时改变圆角
通过给元素设置 transition 属性，可以让 border-radius 在状态切换时产生动画效果。
示例：
.box {
width: 100px;
height: 100px;
background: #3498db;
border-radius: 10px;
transition: border-radius 0.3s ease;
}
.box:hover {
border-radius: 50%;
}
鼠标悬停时，方块的圆角会平滑过渡为完全圆形。
立即学习“前端免费学习笔记（深入）”；
控制过渡的节奏和范围
你可以调整 transition 的参数来控制动画表现：
- 时间：如 0.5s 比 0.3s 更慢更柔和
-
缓动函数：使用
ease-in、ease-out或cubic-bezier()定制加速度 -
指定属性：写
transition: border-radius避免影响其他样式动画
例如：
.box {
transition: border-radius 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
结合其他属性实现复合动画
你也可以同时过渡多个属性，比如宽度、背景色和圆角：
.card {
width: 120px;
height: 120px;
background: #e74c3c;
border-radius: 15px;
transition: all 0.4s ease;
}
.card:hover {
width: 140px;
height: 140px;
border-radius: 20px;
background: #c0392b;
}
注意：使用 all 要谨慎，可能影响性能或造成意外动画。
注意事项
某些情况下 border-radius 动画可能表现异常，尤其是当值为百分比且元素尺寸变化时。建议：
- 保持宽高一致时使用
50%实现圆形过渡更稳定 - 避免从
0直接到50%同时改变尺寸，可分步优化体验 - 在移动端测试流畅性，必要时添加
will-change: border-radius提升性能
基本上就这些。合理使用 border-radius 与 transition，能让你的界面交互更有质感。不复杂但容易忽略细节。
