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

请尝试以下操作。

this link也很有帮助。

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

Answer 2

您的问题是，您无法为内联元素（默认情况下为跨度）指定宽度和高度，您需要设置范围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>

More information about display

Answer 3

您可以使用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>

Answer 4

我认为你所追求的与css或视觉问题无关。你面临的问题是在另一个元素的顶部有一个元素，而底部的元素没有被点击＆＃34;因为顶部的元素 - 或者那种效果。我是对的吗？

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

＆＃13;

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);

＆＃13;

#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;
}

＆＃13;

<div id="Outer">
  <div id="Inner">
    click me!
  </div>
</div>

<div id="Ontop">
  &nbsp;
</div>

＆＃13;

我不知道您的问题是否可以通过css解决，或者您是否必须在顶层元素上放置一个新的click事件，该元素在下面的元素上调用事件：

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

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

Answer 5

对于您的任务，最好使用canvas

这是example。你可以把它用于你的任务。

此外，您可以在代码中添加2个带边框的不同圆圈。

＆＃13;

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();
    }
}

＆＃13;

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

＆＃13;

带有空心边框的Css圈？

5 个答案: