CSS圆角overflow:hidden容器内按钮边角多余空白如何解决

按钮边角出现多余空白区域：外层按钮容器设置了border-radius圆角属性与overflow: hidden，内部按钮设置width: 100%且未配置圆角属性，异常效果如下：

问题复现代码：

.button-container {
    background: #ffffff;
    box-shadow: 0px 0px 8px rgb(0, 0, 0, 0.25);
    border-radius: 4px;
    overflow: hidden;
}

.button{
   padding: 20px 30px;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
   width: 100%;
   font-size: 0.75rem;
   font-weight: 600;
   line-height: 14px;
   color: #fff;
   gap: 10px;
   border: unset;
   background-color: #3c4365;;
   cursor: pointer;
}

该问题由浏览器圆角渲染的抗锯齿计算逻辑导致：
父元素通过overflow: hidden配合圆角裁剪直角子元素时，浏览器会对圆角边缘做像素级半透明抗锯齿插值，该计算存在1px以内的精度误差，会将父容器的白色背景漏在圆角缝隙位置，视觉上呈现为边角多余空白，并非overflow: hidden属性失效。当子元素为深色、父容器为浅色时，漏出的缝隙会非常明显。

• 最优方案：给内部.button元素添加与父容器一致的border-radius: 4px，无需依赖父元素裁剪，从根源消除边缘缝隙，改造成本最低
• 兼容方案：给内部按钮添加极小幅度的缩放，例如设置transform: scale(1.01)，让按钮尺寸轻微放大，刚好覆盖漏出的父容器背景，注意缩放比例不要超过1.02，避免出现圆角视觉变形
• 结构优化方案：移除冗余的父容器嵌套，直接将阴影、圆角、背景属性设置在按钮元素本身，不存在父子裁剪关系就不会触发该问题
• 视觉适配方案：将父容器的背景色修改为与内部按钮一致的#3c4365，即使边缘存在抗锯齿漏出的像素，因颜色与按钮统一也不会显现白边

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