CSS 圆圈 - 元素内部带有空白的外边框

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 外边框

.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

Use background-clip: content-box; so your background fills the content area only and set padding as a size of white space.

See the snippet below:

.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>