CSS 圆 - 可以在边框和背景颜色之间添加透明间隙吗？

Question

我正在用 CSS 创建一个圆圈，我希望圆圈的边框和背景颜色之间有一个间隙，以便您可以看到背景。这可能吗？

.container {
  background:url('https://picsum.photos/536/354');
}
.circle {
  width:50px;
  height:50px;
  border-radius:50px;
  border:1px solid red;
  background:red;
}

<div class="container">
<div class="circle"></div>
</div>

期望的结果:

Answer 1

您可以使用伪元素 (.circle::after) 和以下(或类似)设置来实现此目的:

.container {
  height: 100px;
  background: url('https://picsum.photos/536/354');
}

.circle {
  top: 20px;
  left: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: red;
  position: relative;
  box-sizing: border-box;
}

.circle::after {
  content: '';
  position: absolute;
  box-sizing: border-box;
  border: 3px solid red;
  border-radius: 50%;
  width: calc(100% + 16px);
  height: calc(100% + 16px);
  left: -8px;
  top: -8px;
}

<div class="container">
  <div class="circle"></div>
</div>