Question

当我正在尝试制作一个动画人物（悬停时的过渡）时，我发现当我应用border-radius时，<figure>的背景显示在边缘附近：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似乎都不是原因，因为它们可以互换，像素化边缘仍然会出现。

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

Answer 1

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

当边框消除锯齿时，它会“渗透”到背景中以柔化边缘，因此您会在图像周围看到“锯齿状”环，就像在月球周围看到日冕一样一次完整的日食。

问题始终存在，无论是否覆盖了消除锯齿的对象，如果要绘制圆形然后对其进行反锯齿，您会看到圆圈比抗锯齿版本略窄。大多数抗锯齿算法会聚合对象的周围像素，而不是其中包含的像素。

要克服它，您需要使图像足够大以覆盖消除锯齿边缘占用的空间或减少容器，使消除锯齿区域小于图像。

Answer 2

http://codepen.io/marczking/pen/KwMgaR

所以在玩完之后（使用background-image和伪元素，不做任何改变......）你会发现只有在应用圆角时才能看到这个亮边框。所以我在这里假设它必须做浏览器渲染CSS的方式，CSS规则没有错误^^）

<figure>
  <figcaption>Demo</figcaption>
</figure>

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

}
figure::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: url("http://placehold.it/400x400") no-repeat;
  border-radius: 100px; /* Forced on image for smooth transition */
  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::before {
  opacity: 0;
}
figure:hover figcaption {
  top: 50%;
}

Answer 3

你可以添加一个不透明度为0的新标签，然后淡出图像淡出。

＆＃13;

figure {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  overflow: hidden;
  position: relative; /* For caption */
}

background {
  background-color: red;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  overflow: hidden;
  opacity: 0;
  position: fixed;
  z-index: 5;
  transition: opacity 1s ease-out;
}

img {
  border-radius: 50%; /* Forced on image for smooth transition */
  width: 100%;
  transition: opacity 1s ease-out;
  position: relative;
  z-index: 100;
}

figcaption {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  color: hotpink;
  text-align: center;
  transition: top 1s ease-out;
  z-index: 10000;
}
figure:hover img {
  opacity: 0;
}
figure:hover background {
  opacity: 1;
}
figure:hover figcaption {
  top: 50%;
}

＆＃13;

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

＆＃13;

请注意我添加了background代码，并从background-color

中删除了figure

Answer 4

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

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

这让我可以创建伪背景＆＃39;后来我用 transform：scale（0.997）; 缩小了一点，所以它的大小只是相同但略低于可见边缘。当然，在你的情况下，你还需要绝对定位图像，这样就不会被这个:: before。

推到下面

铁血＆＃34;边界＆＃34;由于包装元素上的背景颜色而显示border-radius：50％;

4 个答案: