Html 我怎样才能去掉这个圆上半部分的白色轮廓？

我似乎无法摆脱这个圆圈上半部分的白色轮廓。有没有办法解决这个问题？

正文{
背景色：黑色；
填充：50px；
}
.广场{
背景色：白色；
边缘底部：20px；
高度：200px；
宽度：200px；
溢出：隐藏；
}
半方形{
背景色：#462a04；
高度：100px；
宽度：200px；
}
.圆圈{
背景色：白色；
高度：200px；
宽度：200px；
边界半径：50%；
溢出：隐藏；
}
半圆形{
背景色：#462a04；
高度：100px；
宽度：200px；
}

---

您之所以看到这一点，是因为包含div的

.circle

有一个白色背景，正在泄漏。您可以通过删除包含div的背景并为白色半圆添加第二个div来修复此问题：

<div class="square"><div class="halfSquare"></div></div>
<div class="circle">
     <div class="halfCircle"></div>
     <div class="halfCircle2">
</div></div>

.circle {
    height: 200px;
    width: 200px;
    border-radius: 50%;
    overflow: hidden;
}
.halfCircle {
    background-color: #462a04;
    height: 100px;
    width: 200px;
}
.halfCircle2 {
    background-color: white;
    height: 100px;
    width: 200px;
}

.圆圈{
高度：200px；
宽度：200px；
边界半径：50%；
溢出：隐藏；
}
半圆形{
背景色：#462a04；
高度：100px；
宽度：200px；
}
.半圈2{
背景色：白色；
高度：100px；
宽度：200px；
}

之前：

之后：

---

容器必须是透明的。白色边框是由于容器具有白色背景。这样做：

<div class="square"><div class="halfSquare"></div></div>
<div class="circle">
   <div class="halfCircle2"></div>
   <div class="halfCircle1"></div>
</div>  

---

小提琴：

在我看来，如果你用这种方式建造它，你就做不到。白色像素应该是一个点，“棕色像素”应该至少有一点（少于一个像素）在它的容器中。因此，它将是溢出的，并且溢出是隐藏的。所以浏览器会显示容器。谢谢garryp，这对我来说很有用。知道为什么它发生在圆上而不是正方形上吗？@NewsletterPoll它不会发生在正方形上，因为容器和包含的像素彼此重合，但是当是曲线段时，没有这样精确的重合，所以肉眼可以看到。因为正方形的旋转，所以没有消除混叠。但是，如果旋转正方形，使其边与屏幕成对角线，您将看到类似的问题

        .circle {
            height: 200px;
            width: 200px;
            border-radius: 50%;
            overflow: hidden;
        }
        .halfCircle2 {
            background-color: #462a04;
            height: 100px;
            width: 200px;
        }
        .halfCircle1 {
            background-color: white;
            height: 100px;
            width: 200px;
        }