CSS – 边框上有边距的圆形

在本文中，我们将介绍如何使用CSS在一个圆形边框上添加边距。常规的圆形边框是没有边距的，但是通过一些技巧我们可以实现这个效果。

阅读更多：CSS 教程

创建一个基本的圆形边框

首先，让我们创建一个基本的圆形边框，然后在此基础上添加边距。我们可以使用CSS的border-radius属性来创建一个圆形边框。下面是一段简单的CSS代码来实现这个效果：

.circle {
  width: 200px;
  height: 200px;
  border: 2px solid black;
  border-radius: 50%;
}

在这个例子中，我们创建了一个宽高都是200px的div元素，并设置了一个2px的黑色实线边框。通过设置border-radius为50%，我们可以将这个div元素变为一个圆形。

在边框上添加边距

要在圆形边框上添加边距，我们可以使用CSS的padding属性。但是在这里，我们需要使用一个伪元素来实现这个效果。下面是我们可以使用的CSS代码片段：

.circle {
  position: relative;
  width: 200px;
  height: 200px;
  border: 2px solid black;
  border-radius: 50%;
}

.circle::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  background-color: #ffffff;
  border-radius: 50%;
}

在这个例子中，我们在.circle选择器中设置了position:relative，这样伪元素.circle::after可以相对于.circle进行定位。我们使用了top、left、right和bottom属性来设置边距的大小。同时，我们设置了一个背景颜色为白色的伪元素，并将其圆角设置为50%来匹配圆形边框的形状。

请注意，我们必须使用伪元素来实现这个效果，因为我们需要在边框上添加边距，而padding属性只能在内容区域内添加边距。

示例

为了更好地理解和演示这个效果，让我们来看一个实际的示例。假设我们有一个圆形头像，现在我们想要在边框上添加一些边距。

首先，让我们创建一个基本的圆形头像元素：

<div class="avatar"></div>

然后，使用我们之前的CSS代码来创建一个圆形边框：

.avatar {
  position: relative;
  width: 200px;
  height: 200px;
  border: 2px solid black;
  border-radius: 50%;
}

接下来，我们要在边框上添加边距。我们可以继续使用伪元素.circle::after来实现这个效果：

.avatar::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  background-color: #ffffff;
  border-radius: 50%;
}

现在我们已经成功地在圆形头像的边框上添加了边距，通过调整伪元素的top、left、right和bottom属性，我们可以改变边距的大小。同时，我们还可以通过改变背景颜色来自定义边距的颜色。