Question

我希望红色圆圈的内部为白色，同时与蓝色圆圈重叠，其余部分为透明，以便您可以看到绿色。

如果有人知道如何处理，我会很高兴。

#bigCircle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background-color: rgba(11, 122, 30, 0.8);
}

#middleCircle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background-color: rgba(0,0,250,0.5);
}

.smallCircle {
    margin-top: -244px;
    margin-left: 1px;
    border: solid rgb(226, 85, 20);
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background-color:rgba(255,255,255,0);
  }

        <div id="bigCircle">
                <div id="middleCircle">
                    <div class="smallCircle" />
                </div>
        </div >

Answer 1

#bigCircle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background-color: rgba(11, 122, 30, 0.8);
}

#middleCircle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background-color: rgba(0, 0, 250, 0.5);
}

.smallCircle {
  margin-top: -242px;
  margin-left: 1px;
  border: solid rgb(226, 85, 20) 3px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  position: relative;
}

.smallCircle:after {
  display: block;
  content: '';
  border: solid rgb(226, 85, 20) 3px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  clip-path: circle(120px at 50% 130px);
  background-color: rgb(255, 255, 255);
  position: absolute;
  top: -3px;
  left: -3px;
}

<div id="bigCircle">
  <div id="middleCircle">
    <div class="smallCircle">
    </div>
  </div>
</div>

Answer 2

将radial-gradient作为您固定的背景色，并且与蓝色圆圈的位置相同：

#bigCircle,
#middleCircle{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background-color: rgba(11, 122, 30, 0.8);
}

#middleCircle {
  width: 240px;
  height: 240px;
  background-color: rgba(0, 0, 250, 0.5);
}

.smallCircle {
  margin-top: -244px;
  margin-left: 1px;
  border: solid rgb(226, 85, 20);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  transition:1s all;
  background:radial-gradient(circle 120px at 190px 190px,#fff 99%,transparent 100%) fixed;
}
#middleCircle:hover .smallCircle {
  margin-top: -100px;
}
body {
  margin:0;
}

<div id="bigCircle">
  <div id="middleCircle">
    <div class="smallCircle" ></div>
  </div>
</div>

Answer 3

如果我理解您的问题，可能会有所帮助。

css

#bigCircle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background-color: rgba(11, 122, 30, 0.8);
}

#middleCircle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background-color: rgba(0,0,250,0.5);
}

.smallCircle {
    margin-top: -244px;
    margin-left: 1px;
    border: solid rgb(226, 85, 20);
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background-color:rgba(255,255,255,0);
  }

处理div重叠

3 个答案: