如何修复border-radius导致<img>与圆形边框间的间隙问题？

我之前也碰到过这个超烦人的小间隙！这其实是各大浏览器渲染图片与圆角边框时的常见小bug，尤其是直接给<img>元素设置圆角边框的时候——只要把border-radius设为0，缝隙就消失，完全印证了这一点。

问题根源 #

浏览器在渲染inline-block类型的img元素时，会因为基线对齐的默认规则、像素舍入计算等原因，让边框和图片之间产生肉眼可见的细微空隙。你的行内CSSborder-radius:100px; border:6px solid #202020;本身写法没问题，但渲染机制导致了这个小问题。

亲测有效的解决方案 #

下面几个方法都能解决Chrome、Safari、Firefox里的这个问题，按推荐优先级排序：

• 方案1：修正img的对齐方式或显示类型
  img默认是inline-block元素，自带基线对齐的空白，加上下面任意一个属性就能消除：

  <!-- 方法A：设置为块级元素 -->
  <img src="你的图片地址" style="border-radius:100px; border:6px solid #202020; display:block;">
  
  <!-- 方法B：调整垂直对齐方式 -->
  <img src="你的图片地址" style="border-radius:100px; border:6px solid #202020; vertical-align:middle;">
  

  这个方案最简单，不需要额外HTML结构，大部分情况下都能解决问题。

• 方案2：用父容器包裹，把边框和圆角交给容器
  如果方案1无效，试试把边框和圆角移到父容器上，让img完全填充容器并继承圆角，彻底避免渲染冲突：

  <div style="border-radius:100px; border:6px solid #202020; overflow:hidden; width:200px; height:200px;">
    <img src="你的图片地址" style="width:100%; height:100%; object-fit:cover;">
  </div>
  

  这里object-fit:cover是为了保证图片比例不变且填满容器，根据你的需求也可以换成object-fit:contain等。

• 方案3：触发GPU加速强制重绘
  有时候浏览器的像素计算偏差可以通过GPU加速来修正，给img添加以下属性之一：

  <img src="你的图片地址" style="border-radius:100px; border:6px solid #202020; transform:translateZ(0);">
  <!-- 或者 -->
  <img src="你的图片地址" style="border-radius:100px; border:6px solid #202020; backface-visibility:hidden;">
  

你可以先试方案1，不行再依次尝试后面的方法，我之前用方案2解决过类似的顽固问题，几乎百分百有效。

内容的提问来源于stack exchange，提问作者Milo