border-radius属性可实现圆角效果，提升界面亲和力；通过设置数值统一或分别控制四角，如border-radius:8px用于常规按钮，50%创建圆形或胶囊形状，并可结合transition实现悬停动画，增强交互体验。
在网页设计中，圆角边框能显著提升按钮或容器的视觉亲和力。CSS 的 border-radius 属性正是实现这一效果的核心工具。它允许你将元素的直角边框平滑地变为圆角，让界面看起来更现代、柔和。
基础用法：统一设置四个圆角
最简单的应用是为整个元素设置相同的圆角半径。
.button {background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 8px; /* 四个角都是 8px 圆角 */
cursor: pointer;
}
上面代码中的 border-radius: 8px 会让按钮四角都呈现一致的圆弧效果。数值越大，圆角越明显。常用值在 4px 到 12px 之间，适合大多数按钮场景。
分别控制每个角：灵活定制形状
若需对每个角单独设置，可使用以下属性：
立即学习“前端免费学习笔记（深入）”；
- border-top-left-radius：左上角
- border-top-right-radius：右上角
- border-bottom-right-radius：右下角
- border-bottom-left-radius：左下角
例如，只让按钮左上和左下为圆角：
.pill-left {
border-radius: 8px 0 0 8px;
}
这种写法使用简写形式，顺序为：左上、右上、右下、左下。也可以写成完整形式以增强可读性。
创建胶囊或圆形元素
通过增大 border-radius 值，可以实现特殊形状：
- 设置 border-radius: 50% 可将正方形元素变成圆形，常用于头像或图标按钮。
- 对矩形元素使用 border-radius: 50% 会生成胶囊形状，适合标签或切换按钮。
width: 40px;
height: 40px;
background: #ff4d4d;
border-radius: 50%;
text-align: center;
line-height: 40px;
color: white;
}
结合过渡与悬停增强交互
圆角不仅能美化静态样式，还能参与动态效果。配合 transition 实现鼠标悬停时的圆角变化：
.fancy-button {border-radius: 8px;
transition: border-radius 0.3s ease;
}
.fancy-button:hover {
border-radius: 20px;
}
当用户将鼠标移上按钮时，圆角会从 8px 平滑扩展到 20px，带来轻盈的互动感。
基本上就这些。合理使用 border-radius，能让按钮和容器更具吸引力，同时保持代码简洁。不复杂但容易忽略细节，比如过度圆角可能影响移动端点击体验，建议根据实际场景调整数值。
