css - 由于边框半径为 : 50%; 的包装元素上的背景颜色，显示锯齿状 "border"

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%;
}

请注意:我知道将背景色放在 figure:hover 上是一种解决方法，但我更感兴趣的是出现这种“锯齿状边框”外观的原因.

我的猜测是它与浏览器的 AA 渲染(或相关的东西)有关，并且它处理 <figure>元素不同于媒体元素，例如 <img> ，但我在网上找不到任何证据。这是一个错误，是一个“功能”，还是我实际上可以修复的东西？

最后，我也知道我可以使用 transform: translateY();此处用于动画，但这不是我问题的一部分，因此请不要提供它作为答案。

更新 17/12 14:03

看来这个问题并不是 border-radius: 50% 独有的。当任何包装元素使用 border-radius 时可能会出现此问题结合 overflow: hidden ，当包装器包含的内容等于或大于包装器的尺寸时。

更新 17/12 14:14

overflow: hidden 的用法都没有在包装器元素上，也不使用 border-radius在包含的图像(或任何其他子元素)上似乎是造成这种情况的原因，因为它们可以互换并且像素化边缘仍然会出现。

这似乎表明这个问题完全是由于 2 个 DOM 元素位于完全相同的位置，当任何类型的 border-radius 应用于包装元素并且子元素的可见区域仅限于 parent 的。

Answer 1

我一直有同样的问题，最终使用伪元素而不是背景，有点像这样:

figure::before {
  content: '';
  display: block;
  background-color: red;
  width: 400px;
  height: 400px;
  transform: scale(0.997);
  border-radius: 50%;
}

这让我可以创建“伪背景”，后来我使用 transform: scale(0.997); 将其缩小了一点，所以它的大小相同，但略低于可见边缘。当然，在你的情况下，你还需要绝对定位图像，这样它就不会被这个::before 推到下面。