【CSS】盒子模型圆角边框 ( 通过设置 border-radius 样式设置圆角矩形圆角半径 )

CSS盒子模型的border-radius属性用于设置元素的圆角。通过设置不同的参数，可以创建完美的圆形、椭圆形或者椭圆角矩形。

以下是一些示例代码：

1. 创建一个具有圆角的矩形：

.box {
  width: 200px;
  height: 100px;
  background-color: #4CAF50;
  border-radius: 25px;
}

2. 创建一个正圆形：

.circle {
  width: 100px;
  height: 100px;
  background-color: #4CAF50;
  border-radius: 50%;
}

3. 创建一个椭圆形，水平方向和垂直方向的圆角半径不同：

.oval {
  width: 200px;
  height: 100px;
  background-color: #4CAF50;
  border-radius: 50px / 30px;
}

4. 创建具有单独圆角的矩形：

.box {
  width: 200px;
  height: 100px;
  background-color: #4CAF50;
  border-radius: 15px 30px 45px 60px; /* 顺序为左上角、右上角、右下角、左下角 */
}

5. 创建具有单独圆角的矩形，每个角可以是不同的值：

.box {
  width: 200px;
  height: 100px;
  background-color: #4CAF50;
  border-radius: 15px 30px 45px 60px / 20px 50px 80px 70px; /* 水平和垂直方向分别设置 */
}

以上代码可以直接应用于HTML元素，例如：

<div class="box"></div>
<div class="circle"></div>
<div class="oval"></div>

这些CSS类将应用圆角边框和背景色到对应的HTML元素上。