CSS 圆角属性 (border-radius)

CSS 圆角属性 (border-radius) 是一种用于设置 HTML 元素的边框圆角的属性。通过使用该属性，我们可以创建圆形或椭圆形的元素，并且可以在各个角落设置不同的圆角半径。

1. 基本语法

border-radius 属性具有以下语法：

border-radius: value;

其中，value 可以是一个具体的长度值，也可以是一个百分比值。如果指定了多个值，值之间使用斜杠 / 分隔，表示分别指定水平和垂直方向上的圆角半径。如果只指定一个值，则表示水平和垂直方向上的圆角半径相同。

2. 圆角形状

2.1 圆形

要创建一个圆形的元素，只需将 border-radius 属性设置为元素宽度或高度的一半即可。例如：

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

2.2 椭圆形

要创建一个椭圆形的元素，我们可以使用百分比值来指定不同的水平和垂直方向上的圆角半径。例如：

.ellipse {
  width: 200px;
  height: 100px;
  border-radius: 50%/25%;
}

3. 圆角半径

border-radius 属性可以针对每个角落指定不同的圆角半径。我们可以通过设置具体的长度值或百分比值来控制圆角的大小。例如：

.rounded {
  width: 200px;
  height: 100px;
  border-radius: 10px 20px 30px 40px;
}

也可以将百分比值与具体的长度值结合使用，比如：

.custom-rounded {
  width: 200px;
  height: 100px;
  border-radius: 10px 20px 10% 20%;
}

4. 圆角与边框

border-radius 属性可以与边框属性一起使用，创建出更加复杂的效果。例如：

.rounded-border {
  width: 200px;
  height: 100px;
  border: 2px solid #000;
  border-radius: 10px;
}

如果要指定每个角落的圆角半径并定义边框样式，可以使用以下语法：

.custom-rounded-border {
  width: 200px;
  height: 100px;
  border: 2px dashed #000;
  border-radius: 10px 20px 30px 40px / 5% 10% 15% 20%;
}

5. 兼容性

border-radius 属性在现代的浏览器中得到了广泛的支持，包括 Chrome、Firefox、Safari 和 Edge 等。但在一些旧版本的 IE 浏览器中可能不被支持。为了向后兼容，我们可以通过使用 -webkit-border-radius 和 -moz-border-radius 来提供浏览器特定的前缀。

.custom-rounded {
  width: 200px;
  height: 100px;
  border-radius: 10px;
  -webkit-border-radius: 10px; /* Safari/Chrome */
  -moz-border-radius: 10px; /* Firefox */
}