CSS 边界半径问题的奇怪行为

Question

我关注 html 和 CSS

.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) you can see that the border-radius doesn't work very well. You can check this behavior live at https://mtgprint.cardtrader.com.

有解决此问题的想法吗？

Answer 1

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

CSS 边界半径问题的奇怪行为

Strange behavior with CSS border-radius issue

css

border-radius