勇敢/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浏览器。

- Kaya Toast

---

在 .image-wrapper 上添加 border-color: transparent 可以让它消失吗？ - CodeNinja

是的，没错。看起来这是 Chrome 的一个 bug。如果你在 devtools 中切换一下半径，它就可以解决。很奇怪。 - Miro

@Miro，遗憾的是，边框颜色透明并不能解决问题。可能发生的情况是，如果您在开发工具中尝试某些内容，则会稍微移动一些东西，并且“剩余”的像素会消失。将border-color：transparent放入实际片段并运行它，不需要的点就会出现（在某些缩放级别上）。 - A Haworth

抱歉，我误读了。我尝试使用 background:none; 或透明背景，它可以正常工作。 - Miro

这似乎与系统处理现代设备上一个 CSS 像素映射到多个物理屏幕像素的事实有关，特别是在圆角上舍弃某些屏幕像素，这取决于用于将弧映射到屏幕像素的计算。@temaniafif 的答案是目前为止唯一有效的建议（其他依赖于事物的变化，例如使用开发工具和随后缩放）。 - A Haworth

火狐浏览器也会这样做。这可能不是Webkit的问题。 - Miro

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>

- Temani Afif

---

@KayaToast，你可以永远保持它开放；) 你没有义务快速接受或根本不接受。 - Temani Afif

Answer 2

这个黑科技似乎有效。

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>

- Kaya Toast

---

请注意添加的额外像素，因为它可能会导致一些不必要的空格。 - Temani Afif

同意，这是一个权衡。-webkit-mask不具备普遍的支持，而在替代方法中，为了填充而添加的额外空白可能并不理想。 - Kaya Toast

Answer 3

我很确定这是一个 Webkit 的 bug，因为从开发工具中关闭和重新打开 borer-radius 就可以解决它。一个可能的解决方法是不使用包装器并将 object-fit:cover 添加到图像中以使其响应。您也可以尝试 object-fit:contain，但这会产生黑色条纹。

如果您愿意，可以从 帮助>报告问题 中发送 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>

- Miro

Answer 4

这可能是因为 background-color: black;。尝试将其删除，如果仍然无法正常工作，则添加 border: none;

- MarcDev

---

这两件事都不会起作用。问题明确指出需要黑色背景，而border: none无法实现此要求。 - A Haworth

Answer 5

我猜可能是你的图片问题，在我的笔记本电脑上遇到了同样的格式，我的图片从未提供圆角边框，尝试在你的代码中添加border: none;并查看结果。

- KashimawoJnr

---

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