border-radius可通过transition或@keyframes实现圆角动画，常用于悬停、加载等交互场景。示例包括:hover时从10px到50%的过渡，或关键帧循环变化产生呼吸效果，现代浏览器支持良好，但需注意单位统一、边框阴影同步及移动端性能影响。
在CSS动画中，border-radius 属性可以用来创建圆角，并且支持通过动画实现动态的圆角变化。这种效果常用于按钮悬停、加载状态或卡片翻转等交互场景中，让界面更生动。
border-radius 的基本作用
border-radius 用于设置元素的圆角程度，可以是一个值（四个角相同），也可以是多个值分别控制每个角。例如：
.box {
border-radius: 10px;
}
.round {
border-radius: 50%; /* 完全圆形 */
}
使用 CSS 动画改变圆角
你可以通过 @keyframes 或 transition 来实现 border-radius 的平滑变化。
示例：用 transition 实现鼠标悬停时的圆角变化
立即学习“前端免费学习笔记（深入）”；
.animated-box {
width: 100px;
height: 100px;
background: #3498db;
border-radius: 10px;
transition: border-radius 0.5s ease-in-out;
}
.animated-box:hover {
border-radius: 50%;
}
当鼠标移到元素上时，圆角会从 10px 平滑过渡到 50%，形成一个圆形。
关键帧动画实现复杂圆角变化
如果需要更复杂的圆角变化节奏，可以使用 @keyframes：
@keyframes pulse-radius {
0% {
border-radius: 10px;
}
50% {
border-radius: 25%;
}
100% {
border-radius: 10px;
}
}
.pulsing-box {
width: 80px;
height: 80px;
background: #e74c3c;
animation: pulse-radius 2s infinite;
}
这个例子会让元素的圆角在 10px、25% 之间循环变化，产生“呼吸”般的效果。
注意事项与兼容性
- border-radius 动画在现代浏览器中支持良好，但在一些旧版本 IE 中不支持动画过渡。
- 尽量避免在动画中频繁切换不同单位（如 px 和 %）混合值，可能导致渲染不一致。
- 若元素有边框（border）或阴影（box-shadow），注意圆角变化时这些样式也会随之调整。
- 移动端注意性能，过度使用复杂形状动画可能影响流畅度。
基本上就这些。合理使用 border-radius 配合 CSS 动画，能提升用户体验又不增加代码负担。
