在Brave/Chrome浏览器中，图像周围不需要的半径半径角 [英] Unwanted border-radius corners around images in Brave/Chrome browser

问题描述

我试图在具有 border-radius:5px; 的容器内显示一个简单的图像.但是在拐角处似乎有一个细边框的轮廓(您需要仔细看一下下图).我如何避免这些拐角边界?

I tried to display a simple image, inside of a container with border-radius: 5px;. But there seem to be an outline of thin border at the corners (you'll need to look carefully at the below image). How can I avoid these corner borders ?

.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％;宽度:自动;} 来保持宽高比，并在图像尺寸太薄或太宽等情况下照顾场景.

Yes, it goes away if I remove background-color: black;. But I need to retain the background-color and I also need img { height: 100%; width: auto; } to maintain the aspect ratio and to care of scenarios when the size of the image is too thin or too wide, etc.

在搜索其他类似问题时，我只能找到有关Safari的问题/答复.我正在使用Brave浏览器.

Searching for other similar questions, I could only find questions/responses for Safari. I'm using Brave browser.

推荐答案

使用遮罩而不是溢出会产生更好的结果(由于两者隐藏在外面，所以两者的行为相同)

Using mask instead of overflow gives a better result (both behave the same since both hide what is outside)

.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>

这篇关于在Brave/Chrome浏览器中，图像周围不需要的半径半径角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！