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

Question

如何切断这两个 div 之间的共享边界线？我希望顶部的小 div 在三个边上都有边框，期望底部和下方的储藏室 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课程中删除来实现这一点。

请参阅 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;
}