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

【问题标题】：Gap between border and image when border radius is added添加边框半径时边框和图像之间的间隙
【发布时间】：2014-06-22 19:24:00
【问题描述】：

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

问题如下图所示。

还有我正在使用的 css，

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

注意

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

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

编辑 JS Fiddle link

【问题讨论】：

你能发布一个 jsfiddle 的例子吗？
您是否希望 border-raidus 在 IE8 中工作？
46x46 是一个小尺寸，我认为在正常缩放水平下几乎人们看不到差距。所以这并不是一个严重的问题。如果它对你很重要，你可以尝试放置一些覆盖的 div 来弥补差距。
即使我放大也看不到问题：jsfiddle.net/webtiki/5Y5mR
ie8 没有边框半径支持，除非你使用这样的东西：css3pie.com/documentation/pie-js

标签： html image css

【解决方案1】：

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

见jsFiddle

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案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 是使用边框半径的“错误”，您也可以尝试通过添加与边框颜色相同的图像背景颜色来修复它：

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;
    }

【讨论】：

图片是动态的。更清楚地说，该图像是用户将要上传的用户个人资料图像。所以我们不能让图像与边框颜色相同。
您将不会拥有相同颜色的图像，背景颜色将放置在您的图像下方，因此消除了差距，我用工作的 jsFiddle 发布了另一个答案，这样您就可以理解我的意思了。

【解决方案4】：

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

【讨论】：

黑客不是解决方案

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

在这种情况下，您可以在 CSS 文件的顶部尝试此操作：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

它将消除这个差距。为了防止图片缩小，您可以在 img 类中添加这条 CSS 规则：object-fit: cover;。

【讨论】：