css - CSS边框半径问题的奇怪行为

Question

我有以下带有 CSS 的 html

.image_with_loader_container {
  position: relative;
  width: 100%;
  padding-bottom: 139.34426%;
  background: #dbdbdb;
}

.image_with_loader_container img {
  border-radius: 4.75%/3.5%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

<div class="image_with_loader_container">
  <img src="..." />
</div>

在此视频(Chrome 83) 中，您可以看到边界半径不能很好地工作。您可以在https://mtgprint.cardtrader.com实时查看此行为。

有什么想法可以解决这个问题吗？

Answer 1

您正在为图像添加圆角，但容器background: #dbdbdb;仍然是一个矩形。（如果您将半径设置为较大的值，例如 100%，您会看得更清楚）。尝试删除该背景，或将相同的边框半径添加到.image_with_loader_container.