【CSS应用篇】——CSS如何实现圆角边框

CSS提供了border-radius属性，可以用来创建圆角边框。

/* 创建一个圆角矩形 */
.rounded-rectangle {
  width: 200px;
  height: 100px;
  background-color: skyblue;
  border: 2px solid black;
  border-radius: 15px; /* 设置圆角的半径为15px */
}
 
/* 创建一个圆角圆形 */
.rounded-circle {
  width: 100px;
  height: 100px;
  background-color: pink;
  border: 2px solid black;
  border-radius: 50%; /* 设置border-radius为50%，形成圆形 */
}

HTML部分：

<div class="rounded-rectangle"></div>
<div class="rounded-circle"></div>

border-radius属性可以接受不同的值：

• 单一值：如15px，将创建四个相等的圆角。
• 两个值：第一个值是水平半径，第二个值是垂直半径（例如15px 5px）。
• 三个值：第一个和第二个值是水平半径，第三个值是垂直半径（例如15px 5px 10px）。
• 四个值：分别指定左上角、右上角、右下角、左下角的圆角（例如15px 5px 10px 20px）。
• 百分比值：可以用百分比指定圆角的大小，相对于元素的宽度或高度（例如20% 40% 60% 80%）。