Question

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

div.bg不应该覆盖div.fill吗？所以cirlce的上半部分应该是全黑的？（有一条细白线）

＆＃13;

body {
  background: black;
}

#asd {
  height: 35px;
  width: 35px;
  border-radius: 35px;
  overflow: hidden;
  position: relative;
}
  
span {
  color: red;
  text-align: center;
  font-size: 10px;
  line-height: 35px;
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 3;
}
  
#asd div {
  height: 100%;
  width: 100%;
  position: absolute;
}
    
div.bg {
  background: white;
  z-index: 1;
}

div.fill {
  background: black;
  height: 50% !important;
  z-index: 2;
}

＆＃13;

<div id="asd">
  <span>lorem</span>
  <div class="bg"></div>
  <div class="fill"></div>
</div>

＆＃13;

Answer 1

这是由于抗锯齿和颜色添加造成的。

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

白色圆圈位于黑色圆圈后面，为了使边缘看起来平滑，边缘像素略微混合。这称为anti-aliasing or supersampling。

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

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

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

这只是各个浏览器的限制/设计选择，有些人认为它确实是正确的行为。正如您在网页设计中发现或将要发现的那样，有许多方法可以让猫皮肤变形，所以我的建议是寻找替代解决方案，而不是破解这个确切的问题。

一般经验法则：尽量不要包含额外的标记来实现视觉风格。人们通常可以通过CSS实现一切。请记住背景渐变，伪元素和边框，大多数视觉效果都在触手可及。

首先，我不建议使用两个div元素进行此样式设置。相反，我会使用白色圆圈的背景属性来描述您正在寻找的视觉效果。

具体来说：background: linear-gradient(to bottom, black 50%, white 50%);

＆＃13;

body {
  background: black;
}

#asd {
  height: 35px;
  width: 35px;
  border-radius: 35px;
  overflow: hidden;
  position: relative;
}
  
span {
  color: red;
  text-align: center;
  font-size: 10px;
  line-height: 35px;
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 3;
}
  
#asd div {
  height: 100%;
  width: 100%;
  position: absolute;
}
    
div.bg {
  background: linear-gradient(to bottom, black 50%, white 50%);
  z-index: 1;
}

＆＃13;

<div id="asd">
  <span>lorem</span>
  <div class="bg"></div>
</div>

＆＃13;

Answer 2

我认为你指的是你圈子周围的锯齿状边缘，我认为这是一个渲染工具引起了反作用。

元素上的边界半径得到sharpened可以通过反对象来说话，这会在元素周围呈现不同颜色的像素，以平滑掉硬边缘（请纠正我，如果这是错误的，我'我没有这方面的专家）。通常情况下，行为很好，但在您的情况下，它会出现伪影。

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

body {
  background: black;
}

.circle {
  width: 35px;
  height: 35px;
  line-height: 35px;
  font-size: 11px;
  border-radius: 50%;
  color: red;
  text-align: center;
  background: linear-gradient(0deg, white 50%, black 50%);
}

<div class="circle">
  lorem
</div>

为什么我的css圈中有一个小圆圈？

2 个答案: