添加边界半径时边框和图像之间的间隙

Question

我有一个边框半径为50%的图像和一个3px的边框.我的问题是当给出边界半径时,图像和边界之间有1px的间隙.

问题在下图中展示.

而我正在使用的CSS,

img {
    border: 3px solid #4CB7AC;
    height: 46px;
    width: 46px;
    border-radius:50%;
}

注意

• 图像尺寸为46px X 46px.没有调整大小.
• 我必须<img>用来获取图像.排除将其设置为背景图像.
• 解决方案必须与所有浏览器兼容.甚至是IE8.

有没有办法消除这种差距？

编辑 JS小提琴链接

Answer 1

只需添加Background color相同的边框颜色,它是固定的.

见jsFiddle

Answer 2

该background-color建议很有效，但如果您处于背景颜色不太理想的情况（例如具有 bt 透明度的 PNG 图像），那么您可能可以使用background-clip: border-box;

有关该属性的更多详细信息，请参阅MDN 上的背景剪辑。