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>

- user9187119

---

你有示例HTML代码吗？ - Saravana

你的CSS缺少像display: inline-block这样的东西，以使span首先接受宽度和高度...但除此之外，不清楚你在问什么 - 给body设置背景颜色，它已经透过圆形发光了，所以问题到底是什么呢？ - CBroe

问题在于圆形的不可见部分遮挡了下面的一个元素，而这个元素上有一个我需要使用的点击方法。编辑：我的意思是，它并没有在视觉上隐藏这个元素，但它隐藏了点击方法。 - user9187119

Answer 1

您可以使用poiner-events: none将点击和悬停委派给被覆盖的元素。该方法适用于所有主要浏览器以及IE 11以上版本。

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

- xong

---

终于有人理解了我表述不清的问题！pointer-events 就是我一直在寻找的！ - user9187119

好的，不错的提醒！我差点忘了那个 :) - Winter

Answer 2

您的问题是无法给内联元素（默认情况下为span）指定宽度和高度，您需要将该元素设置为inline-block或block：

.inner-circle{
  display:inline-block;   /* add this */
  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>

有关于display的更多信息

- Pete

Answer 3

请在下面尝试。

this link also helpful.

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

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

- Saravana

---

但我需要圆圈为空心的，不是透明的，背景不应该存在，我只希望留下边框。 - user9187119

请问您能否添加一张手绘图片，以便更清晰地表达您的需求。 - Saravana

Answer 4

我认为你所追求的与CSS或视觉问题无关。你面临的问题是一个元素在另一个元素上方，底部的元素由于上方的元素而无法被“点击” - 或者类似这样的情况。我说得对吗？

我认为这可能说明了正在发生的事情：

const outer = document.getElementById('Outer');
const inner = document.getElementById('Inner');

outer.addEventListener("click", function(event) {
  alert('Clicked outer');
}, false);

inner.addEventListener("click", function(event) {
  alert('Clicked inner');
}, false);

#Outer {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: pink;
  padding: 10px;
}

#Ontop {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 10px;
  left: 10px;
  border-radius: 50%;
  border-style: solid;
  border-width: 2px;
  border-color: blue;
  background-color: rgba(0, 0, 0, 0);
  padding: 10px;
}

<div id="Outer">
  <div id="Inner">
    click me!
  </div>
</div>

<div id="Ontop">
  &nbsp;
</div>

我不确定你的问题是否可以通过css解决，或者你是否需要在顶部元素上放置一个新的点击事件，并调用下面元素的事件：

const ontop = document.getElementById('Ontop');

ontop.addEventListener("click", function(event) {
  inner.click();
}, false);

- Winter

Answer 5

对于您的任务，最好使用画布。

这里有一个示例。您可以将其应用到您的任务中。

此外，您可以在代码中放置两个具有边框的不同圆形。

var ctx;
var canvas = document.getElementById("canvas");
var leftValue = 250;
var topValue = 150; 

drawWheel1();

function drawWheel1() {
    if(canvas.getContext) {
     var outsideRadius = 120;
     var insideRadius = 80;
        var arc = Math.PI * 2;
  
        //Initialization
     ctx = canvas.getContext("2d");
     ctx.lineWidth = 5;
      
        //Draw the outer arc
       ctx.beginPath();
     ctx.strokeStyle = "black";
       ctx.fillStyle = "#029990";
       ctx.arc(leftValue, topValue, outsideRadius, 0, arc, false);     
        ctx.stroke();
       ctx.fill();
        ctx.closePath();
      
        //Draw the inner arc
        ctx.beginPath();
     ctx.strokeStyle = 'white';
        ctx.fillStyle = 'white';
        ctx.arc(leftValue, topValue, insideRadius, arc, 0, true);
        ctx.stroke();
       ctx.fill();
        ctx.closePath();
    }
}

<canvas id="canvas" width="500" height="580"></canvas>

- Jarvis

---

这是一个选项，但如何在画布上绘制这个空心圆？ - user9187119

@ChrisK.，我添加了一个链接。 - Jarvis

虽然这个链接可能回答了问题，但最好在此处包含答案的基本部分并提供参考链接。如果链接页面更改，仅有链接的答案可能会失效。- 来自审查 - Vidhi Dave

@VishvaDave，明白了！ - Jarvis