CSS边框半径问题的奇怪行为答案

【问题标题】：Strange behavior with CSS border-radius issueCSS边框半径问题的奇怪行为
【发布时间】：2020-10-10 05:45:36
【问题描述】：

我有以下带有 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>

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

有解决这个问题的办法吗？

【问题讨论】：

为什么您的.image_with_loader_container 中需要background: #dbdbdb;？尝试不使用它

标签： css border-radius

【解决方案1】：

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

【讨论】：