如何在 CSS 中给 DIV 圆角边框角？

在 CSS 中设置 DIV 圆角边框角非常简单。以下是我可以提供的几种方法。

1. 使用 border-radius

使用 CSS 的 border-radius 意味着我们需要以百分比或像素来定义曲率。例如，以下代码将在 DIV 的四个角创建一个 20 像素的曲线半径：

div {
  border-radius: 20px;
}

我们可以更精细地设置每个角的曲线半径，通过为每个值提供每个角度的值。例如，以下代码将在第一个 DIV 的左上角和右下角创建一个曲线半径：

div {
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

2. 使用 CSS 伪元素

CSS 伪元素 :after 和 :before 可以用来创建圆角边框角。以下是一个示例，将在 DIV 的四个角创建 20 像素的曲线半径：

div {
  position: relative;
  z-index: 1;
  border: 1px solid #ccc;
}
div::before,
div::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  border: 1px solid #ccc;
  border-radius: 20px;
  z-index: -1;
}
div::before {
  width: calc(100% + 2px);
  height: calc(100% + 2px);
}
div::after {
  width: calc(100% + 4px);
  height: calc(100% + 4px);
}

3. 使用图片

另一种方法是使用图片。您可以创建具有圆角角的背景图像，并将其用作 DIV 的背景。例如：

div {
  background-image: url('rounded-corners.png');
  background-position: top left;
  background-repeat: no-repeat;
}

总结

以上是几种在 CSS 中设置 DIV 圆角边框角的方法。这些方法都具有自己的优点和缺点。有时候使用一个或多个技术来实现复杂的设计效果。