CSS 边框半径 - CSS

简介

CSS 边框半径（CSS Border Radius）是一种用于设置 HTML 元素边框圆角效果的 CSS 属性。通过调整边框半径，可以使元素的边框变得圆滑，从而为设计提供更加美观的外观。

语法

border-radius: 参数值;

• 参数值可以是一个具体的长度值，表示四个圆角的半径，例如 border-radius: 10px; 表示四个圆角的半径均为 10 像素。
• 参数值也可以是一个具体长度值的列表，表示分别指定四个圆角的半径，例如 border-radius: 10px 20px 15px 5px; 表示顺时针方向分别指定左上、右上、右下和左下四个圆角的半径。

值

• 长度值：可以是像素（px）、百分比（%）或其它长度单位。
• 百分比：以元素的宽度作为参考，按百分比指定圆角半径的相对值。

示例

.rounded-border {
  border-radius: 20px;
}

.individual-corners {
  border-radius: 10px 20px 30px 40px;
}

.ellipse-shape {
  border-radius: 50%;
}

应用场景

• 圆形/椭圆形图像展示
• 菜单按钮、note标签等具有圆角效果的元素
• 列表项或卡片等容器元素的圆角边框效果

浏览器兼容性

CSS 边框半径属性在现代浏览器中得到广泛支持，包括 Chrome、Firefox、Safari 和 Edge 等主流浏览器。但在旧版本的 IE 浏览器中，部分边框半径效果可能不被完全支持。

详细兼容性列表请参考 Can I use。

结论

通过使用 CSS 边框半径属性，开发者可以轻松实现元素边框的圆角效果，从而提升界面的美观度和设计性。掌握好边框半径的使用方法，可以为网页设计添加更多的创意和个性。