CSS中没有背景重叠的部分边框

Partial Border in CSS without background overlapping

本文关键字：边框 重叠 背景 CSS      更新时间：2023-09-26

我有两个带边框的div，如何只删除两个div接触的边框，如下图所示？但没有背景重叠，我的意思是这里的背景必须是透明的。这个问题听起来像CSS中的一个部分边框，但是！！而没有背景颜色重叠。而且它是液体尺寸，意味着不固定。

如果你的div都是静态高度，你可以使用一个伪元素来伪造边界：

div {
    border: 1px solid black;
}
#small {
    border-right-width: 0;
    height: 80px;
}
#big {
    border-left-width: 0;
    height: 200px;
    position: relative;
}
#big:before {
    content: ' ';
    border-left: 1px solid black;
    position: absolute;
    height: 120px;
    left: 0; top: 80px;
}

小提琴在这儿：http://jsfiddle.net/FrKZy/

您可能可以使用Javascript使其在动态高度下工作。

警告：这在IE7或更低版本中不起作用。

相关文章：