html - 如何删除图像周围不需要的白色边框？

Question

在深色背景上制作图像轮播时，我一直面临着特定浏览器上图像周围出现神秘白色边框的问题。

我尝试将 box-shadow 设置为 0，删除边框，并在图像背景的颜色中添加边框；但这些试验都没有导致改变。

当前的CSS：

.card-carousel-cell img {
    padding: 0;
    margin: 0 0 10px 0;
    width: 110px;
    height: 110px;
    border-radius: 10px;
    background-color: #252525;
    display: block;
}

有什么方法可以跨浏览器一致地消除此问题？

标签： htmlcss

Answer 1

尝试将图像放在具有透明背景的 div 中。.img-container是具有透明背景的 div 并且.myimg是图像。jsfiddle在这里。

.img-container {
  background-color: transparent;
  width: 200px;
  height: 200px;
}
.myimg {
  border-radius: 20px;
  width: 100%;
  height: 100%;
}