Border Radius遮挡图片边缘的原因及解决求助

针对你遇到的图标加padding后边缘仍被轻微遮挡、仅部分图标显示正常的情况，以下是几种可行的解决方法：

方法一：添加object-fit控制图片适配 #

给.singleicon加上object-fit: contain，确保图标在容器内完整展示，避免被圆角裁剪：

.singleicon {
    width: 20px;
    height: 20px;
    padding: 6px;
    background-color: rgb(17, 17, 32);
    border-radius: 20px;
    object-fit: contain; /* 核心修复属性 */
}

原因：默认状态下img的object-fit为fill，会强制拉伸图标填满容器，若图标本身的画布范围不规整，就会被圆角裁掉边缘。contain会保持图标比例，完整显示在容器内部，自然不会出现遮挡。

方法二：修正异常SVG的ViewBox设置 #

部分图标显示正常，说明问题出在异常图标的SVG文件本身：

• 打开显示异常的SVG文件，检查viewBox属性，确保它精准包裹图标图形，没有图形超出画布范围或多余空白
• 调整viewBox数值，让图标居中显示在画布内，无需修改CSS也能正常展示

方法三：改用背景图方式渲染图标 #

如果前两种方法无效，可以把img标签替换为div，用background-image加载图标，更灵活控制显示范围：

.singleicon {
    width: 32px; /* 原宽20px + 左右padding各6px */
    height: 32px; /* 原高20px + 上下padding各6px */
    background-color: rgb(17, 17, 32);
    border-radius: 20px;
    background-image: url('blabla.svg');
    background-size: 20px 20px;
    background-position: center;
    background-repeat: no-repeat;
}

对应的HTML调整为：

<div class="singleicon"></div>

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