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

【问题标题】：Unwanted border-radius corners around images in Brave/Chrome browserBrave/Chrome 浏览器中图像周围不需要的边框半径角
【发布时间】：2021-02-20 06:31:16
【问题描述】：

我尝试在带有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 浏览器。

【问题讨论】：

在 .image-wrapper 上添加 border-color: transparent 会消除这种情况吗？
是的。这似乎是一个 Chrome 错误。如果您从 devtools 打开/关闭半径，它会修复它。很奇怪。
@Miro 遗憾的是边框颜色透明并不能解决问题。可能发生的情况是，如果您在说开发工具中进行尝试，事情会发生轻微变化，并且“剩余”像素会消失。将边框颜色：透明放入实际的 sn-p 并运行它，不需要的点在那里（在某些缩放级别上）。
对不起，我看错了。我尝试使用background:none; 或透明，它可以工作。
这似乎与系统如何处理这样一个事实有关'，取决于用于将弧映射到屏幕像素的计算。 @temaniafif 的答案是迄今为止唯一有效的建议（其他人依赖于事物的变化，例如因为使用开发工具和随后的缩放）。

标签： html css

【解决方案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>

【讨论】：

@KayaToast 你可以让它永远打开；）你没有义务快速接受或完全接受。

【解决方案2】：

很确定这是一个 webkit 错误，因为从 devtool 关闭并重新打开 borer-radius 已修复它。 ~~一种可能的解决方法是不使用包装器并将object-fit:cover 添加到图像以使其响应。您也可以尝试object-fit:contain，但这会产生黑色条纹。~~ 如果您愿意，可以从Help>Report an Issue 发送 Chrome 错误报告。

编辑：没关系。显然，如果您上下滚动页面几次，它就会自行修复，我认为它有效。

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

img {
    border-radius: 15px;
    height: 100%;
    width: auto;
    height: 15em;
    width: 15em;
    overflow: hidden;
    background-color: black;
    border-radius: 15px;
    object-fit:cover;
}

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

【讨论】：

【解决方案3】：

这个 hack 似乎有效。

background-clip: content-box;
padding: 1px;

background-clip: content-box; 比-webkit-mask 拥有更好的浏览器支持

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

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

【讨论】：

只需注意添加的额外像素，因为它可能会给您一些不需要的空白。
同意，这是一种权衡。 -webkit-mask 没有通用支持，在替代方法中，用于填充的额外空格可能是不可取的。

【解决方案4】：

这可能是因为background-color: black;。尝试删除它，如果它不起作用，请添加 border: none;

【讨论】：

这些东西都不行。该问题特别指出黑色背景是必需的，而border: none 不起作用。

【解决方案5】：

我猜它可能是您的图像，在我的笔记本电脑上经过了相同的格式，我的图像从未提供圆角边框，尽管添加了边框：无；到您的代码并查看结果

【讨论】：

图片没有边框。您可以通过在浏览器地址栏中复制/粘贴图像源来查看它。