CSS两个重叠圆角Div边框显示异常问题求助

这种情况是浏览器亚像素渲染导致的小bug——两个带圆角的元素重叠时，下层元素的圆角边缘像素会因为渲染精度问题透出来，尤其是背景色不同的时候更明显。给你几个实用的解决办法：

方法1：给上层元素加同色阴影/边框 #

给.info添加一个和自身背景色一致的细微阴影或边框，刚好覆盖下层的残留像素：

div.info {
    /* 原有样式保留 */
    box-shadow: 0 0 0 1px #f3f3f3; /* 阴影颜色和.info背景色一致 */
}

或者用边框替代：

div.info {
    /* 原有样式保留 */
    border: 1px solid #f3f3f3;
}

方法2：让上层元素圆角略大于下层 #

把.info的border-radius设得比父元素.testCard大1px，这样上层元素的圆角能完全覆盖下层的边缘：

div.info {
    /* 原有样式保留 */
    border-radius: 9px; /* 父元素是8px，这里设9px */
}

方法3：强制上层元素层级与硬件加速 #

明确设置z-index确保上层元素在最顶端，再开启硬件加速优化渲染逻辑：

div.info {
    position: relative;
    z-index: 1; /* 确保层级高于父元素内其他元素 */
    transform: translateY(300px) translateZ(1px); /* 添加translateZ开启硬件加速 */
    /* 原有样式保留 */
}
div:hover .info {
    transform: translateY(-80px) translateZ(1px); /* hover状态同步硬件加速设置 */
}

方法4：让上层元素尺寸略超父元素 #

给.info设置稍微大一点的尺寸，超出父元素的圆角区域，同时因为父元素overflow:hidden，不会影响整体布局：

div.info {
    /* 原有样式保留 */
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    margin: -1px; /* 抵消额外尺寸带来的位置偏移 */
}

以上方法选一个就能解决问题，优先试方法1或2，改动最小且效果稳定。

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