我尝试在容器内显示一个简单的图像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 浏览器。
使用掩码而不是溢出可以提供更好的结果（两者的行为相同，因为两者都hide外面是什么）
.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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
