由于包装元素上的背景颜色,边框半径为50%的锯齿状"边框";

Question

当我正在尝试制作一个动画人物(悬停过渡)时,我发现<figure>当我应用border-radius时,我的背景显示在边缘附近:50%,即使我的图像应该是占用所有可用空间.

有关说明问题的快速演示,请查看http://codepen.io/anon/pen/KwMMKz

HTML

<figure>
  <img src="http://placehold.it/400x400" alt>
  <figcaption>Demo</figcaption>
</figure>

CSS

figure {
  background-color: red;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  overflow: hidden;
  position: relative; /* For caption */

}

img {
  border-radius: 50%; /* Forced on image for smooth transition */
  width: 100%;
  transition: opacity 1s ease-out;
}

figcaption {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  color: hotpink;
  text-align: center;
  transition: top 1s ease-out;
}
figure:hover img {
  opacity: 0;
}
figure:hover figcaption {
  top: 50%;
}

请注意:我知道将背景颜色放在图上:悬停是一种解决方法,但我更感兴趣的是这种"锯齿状边框"外观出现的原因.

我的猜测是它与浏览器的AA渲染(或相关的东西)有关,并且它对待  <figure>元素的方式不同于媒体元素,例如<img>,但是我找不到任何在线证明.这是一个错误,它是一个"功能",还是我可以实际修复的东西？

最后,我也知道我可以在transform: translateY();这里使用动画,但这不是我的问题的一部分,所以请不要提供它作为答案.

更新17/12 14:03

看来这个问题并不是border-radius独有的:50%.当任何包装元素使用可能会发生的问题border-radius与组合overflow: hidden,当包装包含的内容比包装的尺寸相等或更大.

更新17/12 14:14

既不的使用overflow: hidden包装元件上,也没有使用border-radius所包含的图像(或任何其他子元素)上似乎是这种情况的原因,因为它们可以互换和像素化边缘仍会出现.

这似乎表明,当任何类型的border-radius应用于包装器元素并且子级的可见区域仅限于父级的可见区域时,此问题仅由2个DOM元素位于完全相同的位置引起.

Answer 1

看来它确实是浏览器如何处理border-radius为容器的圆角提供平滑边缘的“功能”。图像背景以相同的方式消除锯齿（但由于它是透明的没有效果），可以通过设置 img 背景颜色看到。

当边框进行抗锯齿处理时，它会“渗透”到背景中以柔化边缘，因此您会看到图像周围有一个“锯齿状”环，就像您在全日照期间看到月球周围的日冕一样蚀。

这个问题始终存在，无论抗锯齿对象是否被覆盖，如果您要绘制一个圆然后对其进行抗锯齿，您会看到该圆比抗锯齿版本稍微窄一些。大多数抗锯齿算法都会聚合对象周围的像素，而不是其中包含的像素。

为了克服这个问题，您需要使图像足够大以覆盖抗锯齿边缘占用的空间，或者缩小容器以使抗锯齿区域小于图像。