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 类，并从您的 .ibody 类中删除 margin-top: 3em。

See the jsFiddle.