html - 带有内部空心边框的 Css 圆圈？

Question

有没有什么办法可以在里面做一个空心的圆圈，这样只有边框可见和存在？

这样我只有视觉效果。但是在circle的不可见部分下面有一些对象有一个onClick()方法，而circle隐藏了这个方法，那么如何去掉circle的填充呢？或者这可能是一种糟糕的方法，我应该以不同的方式来做？

我现在的 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

您可以使用 pointer-events: none 将点击和悬停委托(delegate)给覆盖的元素。这适用于所有主流浏览器和版本 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>