17370845950

使用 border-radius 可实现元素圆角效果，基础语法为设置统一半径，如 .box { border-radius: 10px; }，也可用 % 创建圆形头像；支持分别控制四个角，按顺时针顺序赋值或使用命名属性；通过斜杠 / 分隔可设置椭圆圆角，如 20px / 10px；实用技巧包括与 overflow: hidden 配合裁剪内容、用 transition 实现悬停动画，且值过大时浏览器会自动限制。

想要让网页元素看起来更柔和、现代？使用 border-radius 属性是实现圆角效果最简单有效的方式。它能将方形的边框变成圆角，适用于按钮、图片、卡片、输入框等各种元素。掌握它的用法和技巧，可以显著提升页面的视觉体验。

基础语法：设置统一圆角

最简单的用法是为元素的四个角设置相同的圆角半径：

.box {
  border-radius: 10px;
}

这会让元素的四个角都呈现 10px 的圆角。你也可以使用 em、% 或 rem 单位。特别是百分比，在圆形头像场景中非常实用：

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%; /* 完美圆形 */
}

分别控制四个角

如果需要对每个角单独设置，可以传入多个值：

.cool-box {
  border-radius: 10px 20px 5px 15px;
}

这四个值按顺时针顺序分别对应：左上、右上、右下、左下。也可以使用命名属性精确控制：

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

例如：

.card {
  border-top-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

这样只让左上和右下角变圆，创造出独特的设计感。

椭圆圆角：x轴与y轴分开设置

border-radius 还支持两个半径值，分别控制水平和垂直轴的圆角曲率，语法是用斜杠 / 分隔：

.ellipse-corner {
  border-radius: 20px / 10px;
}

这表示水平半径为 20px，垂直半径为 10px，形成椭圆角。你也可以为每个角分别指定双值：

.fancy-box {
  border-radius: 10px 30px 10px 30px / 5px 10px 5px 10px;
}

这种技巧常用于模拟对话气泡或特殊卡片样式。

实用技巧与注意事项

在实际开发中，有几个小技巧能避免常见问题：

• 当 border-radius 值大于元素高度一半时，会自动被浏览器限制为最大可用值，不会出错。
• 配合 overflow: hidden 使用，可以让子元素（如图片）也跟随父容器的圆角裁剪。
• 在按钮或卡片悬停效果中，动态改变 border-radius 可以实现有趣的动画：

.button:hover {
  border-radius: 20px;
  transition: border-radius 0.3s ease;
}

基本上就这些。border-radius 看似简单，但灵活运用能带来丰富的视觉变化，不复杂但容易忽略细节。