使用overflow: hidden加圆角边框时元素边缘出现间隙如何解决？

你遇到的圆角边缘间隙是Chromium内核（Chrome、Edge均基于该内核）的已知渲染问题，当元素同时设置圆角边框、overflow: hidden时，抗锯齿计算会导致边框与内部裁剪区域的边缘出现半透明缝隙，透出容器下方的背景色，效果如下图：

解决方法 #

你可以根据实际需求选择以下方案，也可以组合使用提升效果：

• 方法1：给容器设置与边框同色的背景，直接覆盖透出的缝隙
  该方案改动最小，不会影响原有布局，只需给.pfp-container添加background: black;属性即可。
• 方法2：用内凹盒阴影替代原生border属性，规避border与裁剪逻辑的冲突
  移除原有border:1px solid black，替换为box-shadow: inset 0 0 0 1px black;，同时可添加box-sizing: border-box确保元素尺寸符合预期。
• 方法3：给内部元素添加微小缩放，用超出的边缘覆盖缝隙
  给.pfp和.pfp-overlay添加transform: scale(1.01);，1%的缩放几乎不会影响视觉效果，即可完全盖住缝隙。
• 方法4：触发GPU硬件加速优化渲染效果
  给.pfp-container添加transform: translateZ(0);或者will-change: transform;，触发浏览器使用GPU渲染圆角，大幅减少这类抗锯齿误差。

参考修改代码 #

.pfp-container{
    display: block;
    border:1px solid black;
    background: black;
    height: 100px;
    width: 100px;
    border-radius: 100px;
    margin: 10px auto;
    overflow:hidden;
    position: relative;
    transform: translateZ(0);
}

.pfp{
    height: 100%;
    width: 100%;
}

.pfp-overlay{
    display: flex;
    background-color: #00000050;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: white;
    user-select: none;
    font-weight: bold;
}

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