添加边框半径时，边框和图像之间的间隙 [英] Gap between border and image when border radius is added

问题描述

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

问题在下面的图像中显示。 / p>

和我使用的css，

  img {
 border：3px固体＃4CB7AC; 
 height：46px; 
 width：46px; 
 border-radius：50％; 
} 
  

请注意

• 图片大小为46像素x 46像素。未调整大小。


• 我已使用< img> 获取图片。将其设置为背景图片。


• 解决方案必须与所有浏览器兼容。甚至IE8。

有办法消除这种差距吗？

EDIT
JS Fiddle链接

解决方案

只需添加背景颜色，与您的边框颜色相同，并且已修复。

请参阅 jsFiddle

I have an image with a border radius of 50% and a 3px border around it. My problem is when the border radius is given, there is a 1px gap between the image and the border.

Issue is demonstrated in the below image.

And the css I'm using,

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

Note that

• The image size is 46px X 46px. Not resized.
• And I HAVE to use <img> to get the image. Setting it as a background image is ruled out.
• Solution must be compatible with all browsers. Even IE8.

Is there a way to remove that gap?

EDIT JS Fiddle link

解决方案

Just Add Background color same as your Border color and it's fixed.

See jsFiddle

这篇关于添加边框半径时，边框和图像之间的间隙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！