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

Question

我的图像的边框半径为50％，周围有3px的边框。 我的问题是当给出边界半径时，图像和边界之间有1px的间隙。

问题如下图所示。

我正在使用的CSS，

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

请注意

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

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

EDIT  JS Fiddle link

Answer 1

只需添加与边框颜色相同的Background color即可。

请参阅jsFiddle

Answer 2

$(document).ready(function () { $('.wrapper').bxSlider({ 'auto' : true, 'autoStart' : true }); }); 建议效果很好，但如果你的背景颜色不理想（例如透明度为bg的PNG图像），那么你可以使用{ {1}}

有关该属性的更多详细信息，请参阅background-clip on MDN。

Answer 3

尝试这样做：

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

另外，对于IE8及更低版本，请尝试使用条件注释替换边框半径并添加通用的.png图像

    <!--[if lte IE 8]>
Image source 
 <![endif]-->

<强>更新

你看到的那个GAP是一个＆＃34; bug＆＃34;使用border-radius，您也可以尝试通过添加与边框颜色相同的图像背景颜色来修复它：

img {
        border: 3px solid #4CB7AC;
        height: 46px;
        width: 46px;
        -webkit-border-radius: 46px 46px 46px 46px;
        border-radius: 46px 46px 46px 46px;
        overflow: hidden;
        background-color: #4CB7AC;
    }

Answer 4

将font-size:0添加到img可以解决您的问题。

Answer 5

无溢出：隐藏 使用LEFT和Top也等于父级的高度

      min-height: 52px;
      bottom: 1px;
      left: 0.5px;