Html 为什么我的css圈中有一个亮圈？

我有一个小小的css，它画了一个圆圈，然后用背景填充到一半。两个包含div的大小相同，但较低的div的背景仍然可见

div.bg

不应该覆盖

div.fill

？那么冰圈的上半部分应该是完全黑色的？（有一条细细的白线）

正文{
背景：黑色；
}
#自闭症{
高度：35px；
宽度：35px；
边界半径：35px；
溢出：隐藏；
位置：相对位置；
}
跨度{
颜色：红色；
文本对齐：居中；
字体大小：10px；
线高：35px；
位置：绝对位置；
身高：100%；
宽度：100%；
z指数：3；
}
#建筑署分区{
身高：100%；
宽度：100%；
位置：绝对位置；
}
分区背景{
背景：白色；
z指数：1；
}
分区填充{
背景：黑色；
身高：50%！重要；
z指数：2；
}

洛勒姆

这是由于消除混叠和添加颜色造成的

首先，浏览器会绘制一个完美的白色圆圈：

白色圆圈位于黑色圆圈的后面，为了使边缘看起来平滑，边缘像素会稍微混合。这就是所谓的

现在背景圆已经消除了锯齿，剩下的是一个由灰色轮廓包围的完美白色圆。确切的灰色阴影由浏览器决定，但通常通过在背景色和前景色之间进行插值来决定。让我们假设这会产生50%的黑/白

下一步是在白色圆圈的顶部创建一个黑色圆圈，这将以完全相同的方式消除锯齿。这就是问题所在，因为浏览器做出了错误的假设

黑色圆圈的大小与白色圆圈的大小完全相同，将其混合到背景中以使其看起来平滑。由于白圈周围已经有50%的黑/白像素，因此使用相同的算法将黑添加到这些像素中，从而创建25%的黑/白

这只是个别浏览器的限制/设计选择，有些人会认为这确实是正确的行为。正如你已经发现的，或者将要发现的，在网页设计中有很多方法可以剥猫皮，所以我的建议是寻找一个替代的解决方案，而不是解决这个确切的问题

一般经验法则：尽量不要包含额外的标记以实现视觉样式。通常，只要使用CSS就可以实现所有功能。请记住，背景渐变、伪元素和边框以及大多数视觉效果都可以达到

首先，我不建议在这个样式中使用两个

div

元素。相反，我将使用白色圆圈的背景属性来描述您正在寻找的视觉效果

具体来说：

背景：线性渐变（至底部，黑色50%，白色50%）


正文{
背景：黑色；
}
#自闭症{
高度：35px；
宽度：35px；
边界半径：35px；
溢出：隐藏；
位置：相对位置；
}
跨度{
颜色：红色；
文本对齐：居中；
字体大小：10px；
线高：35px；
位置：绝对位置；
身高：100%；
宽度：100%；
z指数：3；
}
#建筑署分区{
身高：100%；
宽度：100%；
位置：绝对位置；
}
分区背景{
背景：线性梯度（至底部，黑色50%，白色50%）；
z指数：1；
}

洛勒姆
我认为您指的是圆周围的锯齿边，我认为这是由抗锯齿引起的渲染伪影

元素上的边界半径通过消除混叠而变得锐化，这会渲染元素周围不同颜色的像素以平滑硬边（如果这是错误的，请纠正我，我不是这方面的专家）。通常情况下，这是一种很好的行为，但在您的情况下，它会处理工件

请看下面我的代码片段。结果是相同的，但使用背景渐变来实现


正文{
背景：黑色；
}
.圆圈{
宽度：35px；
高度：35px；
线高：35px；
字体大小：11px；
边界半径：50%；
颜色：红色；
文本对齐：居中；
背景：线性梯度（0度，白色50%，黑色50%）；
}

洛勒姆
您在哪个浏览器中查看它？我觉得不错。Chrome和Firefox都是这样呈现的。我在OSX High Sierra上。它们都继承了#asd div的绝对位置，因为它没有空间降到z索引以下。堆栈顺序是最后一个，这与直觉相反，这比我的anwser解释得更好！啊，虽然我们得出了相同的结论：）伟大的人思想相似。回答得很好。我想这与抗锯齿有关，但找不到解决方法。好主意，只使用一个div。谢谢！