求助：Border Radius设置后边框未完全覆盖图片

原因分析 #

出现顶部细小空隙的核心原因：

• <img>标签默认是inline元素，浏览器默认的vertical-align: baseline会让图片和边框之间产生微小的基线偏移，表现为顶部细缝。
• 部分浏览器对替换元素（如img）的border-radius渲染存在细微偏差，导致边框和图片内容间出现缝隙。

解决方案 #

以下几种方案均可解决问题，按需选择：

方案1：修正图片垂直对齐方式 #

在.fotoPerfil的CSS中添加vertical-align属性，消除基线偏移：

.fotoPerfil{
    width: 150px;
    position: absolute;
    margin-top: -6em;
    border: solid 5px white;
    border-radius: 50%;
    vertical-align: top; /* 也可使用middle或bottom */
}

方案2：将图片设为块级元素 #

把<img>转为块级元素，避免inline元素的默认间距：

.fotoPerfil{
    width: 150px;
    position: absolute;
    margin-top: -6em;
    border: solid 5px white;
    border-radius: 50%;
    display: block;
}

方案3：用父容器承载边框（最稳定） #

若上述方案仍有问题，建议将边框和圆角逻辑转移到父容器，规避img元素的渲染兼容性问题：

修改后的HTML：

<div class="d-flex justify-content-center fotoPerfil-container">
  <img src="./img/manu.png" class="fotoPerfil">
</div>

对应CSS：

.fotoPerfil-container{
    width: 150px;
    position: absolute;
    margin-top: -6em;
    border: solid 5px white;
    border-radius: 50%;
    overflow: hidden; /* 确保图片不超出圆角范围 */
}
.fotoPerfil{
    width: 100%;
    display: block;
    border-radius: 50%; /* 同步裁剪图片 */
}

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