非表格元素虚线边框重叠修复：合并边框且避免显示为实线

原始代码 #

CSS #

#grid {
    display: grid;
    grid: auto / repeat(3, 1fr);
    width: 300px;
    height: 100px;
}

#grid div {
    border: 1px dashed black;
    border-radius: 12px;
    height: 100%;
}

#grid div:nth-child(2) {
    margin-top: 20px;
}

#grid div:nth-child(3) {
    margin-top: 40px;
}

HTML #

<div id="grid">
    <div></div>
    <div></div>
    <div></div>
</div>

问题说明 #

当前代码中，网格内的元素因外边距偏移，相交的虚线边框会重叠。尝试用-1px负外边距修复后，部分屏幕上重叠的虚线会显示为实线，不符合需求。

需求 #

• 合并相交的边框
• 避免合并后的边框显示为实线
• 无需定位网格的特定子元素

解决方案 #

使用混合模式消除重叠边框，无需定位特定子元素，具体修改如下：

#grid {
    display: grid;
    grid: auto / repeat(3, 1fr);
    width: 300px;
    height: 100px;
    background-color: white; /* 设置与子元素一致的背景色 */
}

#grid div {
    border: 1px dashed black;
    border-radius: 12px;
    height: 100%;
    mix-blend-mode: difference; /* 消除重叠边框的混合模式 */
    background-color: white; /* 确保背景色覆盖父容器，避免混合模式影响其他区域 */
}

#grid div:nth-child(2) {
    margin-top: 20px;
}

#grid div:nth-child(3) {
    margin-top: 40px;
}

原理 #

mix-blend-mode: difference会计算元素与背景的颜色差值：黑色边框与黑色边框重叠时，差值结果为白色（与背景色一致），重叠部分会被隐藏，最终只显示单层虚线边框，不会出现实线效果。

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