在 CSS 中堆叠边框

Question

我正在用动态生成的子 div 填充父 div。我希望子 div 由父级绑定（因此它们无法在填充内容时水平扩展父级的形状）。同时，我希望子 div 边框位于父 div 边框的顶部，以及彼此之间。我拼凑了一张图表来更好地解释：

通过 CSS 完成此任务的最佳方法是什么？我环顾四周，似乎找不到既可以堆叠边框又可以使子 div 受父 div（在 x 轴上）限制的解决方案。

Answer 1

重叠边界总是有点棘手。在您的情况下，我不建议使用绝对位置和 z 索引 - 这只会使事情变得更加复杂，您将无法再依赖块元素的本机行为。

假设您的 HTML 如下所示：

<div class="parent">
    <div class="child yellow"></div>
    <div class="child blue"></div>
    <div class="child red"></div>
</div>

您可以通过仅将顶部边框应用于:first-child. 即使您动态地向顶部添加更多 div，第一个将始终是看起来“在顶部”的那个：

.child {
    border-style: solid;
    border-width: 0 2px 2px 2px;
    background: white;
}

.child:first-child {
    border-top-width: 2px;
}

.yellow { 
    border-color: yellow;
}

.blue {
    border-color: blue;
}

.red {
    border-color: red;
}

父级需要一点小技巧，因为如果你在它周围添加了一个规则边框，它就会显示在子级周围。

.parent {
    width: 500px; /* or any other width */
    height: 100vh; /* or any other fixed height */
    overflow-y: auto; /* make scrollable */
    box-shadow: inset 2px 2px 0 black, inset -2px -2px 0 black;
}

插图box-shadow在父级内部创建了实心边框的错觉。为了确保它在子边框下方不可见（框阴影往往比边框稍微模糊），您需要确保子组件具有背景颜色。

编辑：这是一个演示。