图片白色边框无法通过border: 0移除的问题求助

兄弟我太懂你这种调样式调半天没效果的崩溃了！我仔细看了你的代码，发现问题根本不是border或者outline的锅，而是标签用法和样式组合出了问题～

先给你拆解下问题根源：

• 你给<img>标签加了背景图，但<img>的本职工作是加载src属性指定的图片，你现在没给它加src，浏览器会自动给空img标签渲染默认的占位样式——你看到的那个"白色边框"，其实是浏览器对空img的默认占位框，不是真正的border！
• 而且把带背景图的类加在img标签上，属于语义和用法都错配了，背景图更适合用在<div>这类块级元素上。

给你两个解决方案，推荐第一个：

方案一：改用div承载背景图（推荐） #

把原来的img标签换成div，彻底避开浏览器对img的默认渲染逻辑，代码调整如下：

<body style="background-color: #000;">
  <article class="card__article">
    <div class="card__img card_mini_1"></div>
  </article>
</body>

你的CSS代码完全不用改，这样那个讨厌的白色边框就会消失啦～

方案二：如果一定要用img标签（不推荐） #

那你得给img加一个透明的占位src，同时把可能的默认样式清零：
首先调整CSS，确保覆盖所有默认样式：

body { background-color: #000; }
.card__article { 
  position: relative; 
  overflow: hidden; 
  width: 25vw; 
  height: 450px; 
}
.card__img { 
  display: block; 
  width: 100%; 
  border-radius: 1.5rem;
  border: 0 !important;
  outline: 0 !important;
  padding: 0;
  margin: 0;
}
.card_mini_1 { 
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/Face-smile.svg/1024px-Face-smile.svg.png"); 
  background-size: cover; 
  height: 100%; 
}

然后修改HTML，给img加上透明占位src，并且用自闭合写法：

<article class="card__article">
  <img class="card__img card_mini_1" src="data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" />
</article>

不过还是强烈建议用方案一，毕竟img标签的语义就是嵌入图片，用它来放背景图既不符合语义，还容易踩这种浏览器默认样式的坑。

对了，补充个小细节：<img>是自闭合标签，不需要写</img>，直接写成<img ... />就规范多啦～

内容来源于stack exchange