带有内部空心边框的 CSS 圆圈？

Question

有没有办法让一个圆内部空心，这样就只有边框可见和存在？

这样我就只有视觉效果了。但是在圆的不可见部分下面有一些对象有一个onClick()方法，并且圆隐藏了这个方法，那么如何摆脱圆的填充呢？或者也许这是一些不好的方法，我应该采取不同的做法？

我当前的 CSS 看起来像这样：

.inner-circle{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border-style: solid;
  border-width: 2px;
  border-color: blue;
  background-color: rgba(0, 0, 0, 0);
}

<span class="inner-circle"></span>

Answer 1

您可以使用poiner-events: none将点击和悬停委托给覆盖的元素。这适用于所有主要浏览器以及自版本 11 以来的 IE。

.inner-circle{
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border-style: solid;
  border-width: 2px;
  border-color: blue;
  background-color: rgba(0, 0, 0, 0);
  position: absolute;
  top:0;
  left:0;
  pointer-events:none;
}

<input type="checkbox" />
<span class="inner-circle"></span>