Brave/Chrome 浏览器中图像周围出现不需要的边框半径角

Question

我尝试在容器内显示一个简单的图像border-radius: 5px;。但角落处似乎有一个细边框的轮廓（您需要仔细查看下图）。如何避免这些角边框？

.cover {
    margin: 1em;
    padding: 1em;
}
.image-wrapper {
    height: 15em;
    width: 15em;
    overflow: hidden;
    background-color: black;
    border-radius: 15px;
}
img {
    height: 100%;
    width: auto;
}

<div class="cover">
    <div class="image-wrapper">
        <img
            src="https://images.pexels.com/photos/316466/pexels-photo-316466.jpeg"
        />
    </div>
</div>

是的，如果我删除它就会消失background-color: black;。但我需要保留background-color，我还需要img { height: 100%; width: auto; }保持纵横比，并处理图像尺寸太薄或太宽等情况。

搜索其他类似问题时，我只能找到针对 Safari 的问题/回复。我正在使用 Brave 浏览器。

Answer 1

使用掩码而不是溢出可以得到更好的结果（两者的行为相同，因为两者都隐藏了外面的内容）

.cover {
  margin: 1em;
  padding: 1em;
}

.image-wrapper {
  height: 15em;
  width: 15em;
  background-color: black;
  border-radius: 15px;
  -webkit-mask:linear-gradient(#fff 0 0);
}

img {
  height: 100%;
  width: auto;
}

body {
  background:pink;
}

<div class="cover">
  <div class="image-wrapper">
    <img src="https://images.pexels.com/photos/316466/pexels-photo-316466.jpeg" />
  </div>
</div>

<div class="cover">
  <div class="image-wrapper">
    <img src="https://picsum.photos/id/17/200/300" />
  </div>
</div>