CSS 如何将盒子的内部和边框都做成圆角

在本文中，我们将介绍如何使用CSS将一个盒子的内部和边框都做成圆角。圆角的设计可以为网页增添一份柔和和现代感，让整体界面更加美观。

阅读更多：CSS 教程

方法一：使用border-radius属性

可以使用CSS的border-radius属性来制作圆角的盒子。border-radius属性可以定义一个盒子的内部和边框的圆角半径。

.round-box {
  border: 1px solid #aaa;
  border-radius: 10px;
}

在上面的示例中，我们给一个名为.round-box的盒子设置了一个1像素宽的边框，并使用border-radius属性给内部和边框设置了10像素的圆角半径。

这种方法只会将盒子的边框设置为圆角，而内部的内容并不会被圆角所影响。如果需要同时设置盒子的内部和边框为圆角，可以尝试下面的方法。

方法二：使用伪元素

使用伪元素可以实现同时将盒子的内部和边框设置为圆角的效果。通过在盒子中插入一个伪元素，并给伪元素设置圆角样式，就可以将盒子的内部也设置为圆角。

.round-box {
  position: relative;
  border: 1px solid #aaa;
}

.round-box::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: 10px;
  background-color: white;
}

在上面的示例中，我们首先给盒子设置了一个1像素宽的边框，并将position属性设置为relative，以便给伪元素定位。然后使用::before伪元素为盒子的内部创建了一个遮罩层，通过设置其position属性为absolute，并使用top、left、right、bottom属性设置伪元素的位置，使其完全覆盖住盒子。接下来，给伪元素设置圆角样式，即可将盒子的内部也设置为圆角。

这种方法可以同时将盒子的内部和边框都设置为圆角，但需要使用额外的伪元素，增加了HTML结构的复杂性。