Question

我想要一个圆形边框，该圆形边框的内部有空白。

这是我尝试过的：

.status {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 100%;
    background-color: #2ed091;
    margin: 5px;
    border: 1px solid black;
}

<span class="status"></span>

如您所见，黑色正在触摸绿色-不应触摸。

然后我进行了研究并发现了CSS Outside Border

.status {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 100%;
    background-color: #2ed091;
    padding: 15px;
    outline: 1px solid black;
}

<span class="status"></span>

但是它显示为一个框，并且边框半径不适用。为什么？

然后我找到了另一个建议伪元素的答案

.status {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 100%;
    background-color: #2ed091;
    padding: 15px;
}

.status:before {
  content: '';
  display: block;
  outline: 1px solid black;
  width: 87px;
  height: 87px;
  border-radius: 100%;
}

<span class="status"></span>

哪个看上去最接近，但我无法使其变为圆形并与圆形对齐。

如何在另一个带有空白的圆圈周围添加一个圆圈？

Answer 1

使用background-clip: content-box;，以便您的背景仅填充内容区域，并将padding设置为空白大小。

请参见下面的代码段

.status {
  display: block;
  width: 8em;
  height: 8em;
  border-radius: 100%;
  background-color: #2ed091;
  margin: 5px;
  border: 1px solid black;
  
  background-clip: content-box;
  padding: 1em;
}

<span class="status"></span>

Answer 2

我认为@KoshVery的答案更为直接，因此在大多数情况下都是可取的。

如果您要修改边框白色部分的颜色，我可以提供另一种解决方案：

.status {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background-color: #2ed091;
}

.status:before {
  display: block;
  border: 3px solid white;
  background-color: #2ed091;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  content: '';
}

<span class="status"></span>

CSS圈子-元素

2 个答案: