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

Question

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

Answer 1

如果您的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或之下工作。