CSS - 剪切或合并div之间的共享边框

Question

如何剪切这两个div之间的共享边界线？我希望顶部的小div有三边的边框，预计底部和下面的larder div只有顶边但留下共享的边框。因此它看起来像一条横跨两个div上边界的线。 我尝试在底部覆盖顶部div。但没有得到我想要的东西。

 .ihead {
background-color: #EEE;
width: 15em;
height: 3em;
text-align:center center;
border-top:1px solid black;
border-left:1px solid black;
border-right:1px solid black;
border-bottom:none;

  }

    .ibody {
background-color: #EEE;
width: 60em;
height:20em;
margin-top:3em;
border-top:1px solid black;
z-index: 10;

  }


<div class="ihead"><h>Hello !</h></div>
<div class="ibody">......</div>

来自 -

到 -

Answer 1

你实现这种效果的正常方法是让盒子在顶部向下移动到它的边框顶部。在您的示例中，您可以通过向position: relative; bottom: -1px课程添加.ihead并从margin-top: 3em课程中删除.ibody来实现此目的。

See the jsFiddle.

Answer 2

.bordered{
border: 1px solid black;
}
.bordered:not(:first-child){ //to merge borders between rows
    border-top: none;
}
.bordered:not(:first-child){ //if you want to merge between columns
    border-left: none;
}

<div class="bordered"><h1>Test1</h1></div>
<div class="bordered"><h1>Test2</h1></div>
<div class="bordered"><h1>Test3</h1></div>

这个问题是第一个为我弹出的问题，所以我觉得最好能像上面接受的答案那样正确地回答它。 使用 CSS：

.bordered{
border: 1px solid black;
}
.bordered:not(:first-child){ //to merge borders between rows
    border-top: none;
}
.bordered:not(:first-child){ //if you want to merge between columns
    border-left: none;
}