Html CSS-div组周围的边框

我是后端开发人员，试图在前端做得更好。 我想知道是否有任何方法，如果你有一组相邻的div，当它们不代表正方形时，在它们周围画一个边框。 下面是我正在尝试的一个例子：

#child1{
顶部：0px；
左：0px；
背景：红色；
}
#孩子2{
顶部：50px；
左：0px；
背景：蓝色；
}
#孩子3{
顶部：0px；
左：50px；
背景：绿色；
}
.孩子{
位置：绝对位置；
宽度：48px；
高度：48px；
边框：2个黑色实心；
}

1.
2.
3.

以下是我的尝试，尽管它不是完全动态的，因为它将依赖于针对父元素的附加css类：

.parent{
边框：2个黑色实心；
显示：网格；
网格模板柱：1fr 1fr；
}
奇数：之后{
内容：''；
边框顶部：2件黑色实心；
左边框：2倍黑色实心；
长方体阴影：2px 2px 0 0白色；//长方体阴影覆盖父对象的边框
}
.孩子{
高度：48px；
}
#孩子1{
背景：红色；
}
#孩子2{
背景：蓝色；
}
#孩子3{
背景：绿色；
}

1.
2.
3.

只需删除希望出现这种情况的边框即可

.child{
位置：绝对位置；
宽度：48px；
高度：48px；
边框：2个黑色实心；
}
#孩子1{
顶部：0px；
左：0px；
背景：红色；
右边框样式：无；
边框底部样式：无；
}
#孩子2{
顶部：50px；
左：0px；
背景：蓝色；
边框顶部样式：无；
}
#孩子3{
顶部：0px；
左：50px；
背景：绿色；
左边框样式：无；
}

1.
2.
3.

这可以通过在每个正方形上引入伪元素来实现

我们绘制初始设置，但每个正方形的最终结果边框宽度是预期的两倍。然后用相同颜色的正方形覆盖每个正方形，没有边框，稍微大一点，z指数更高

这就覆盖了它周围一半的边界。当正方形的边界相互重叠时，它们之间的重叠正方形覆盖了内边界，并保留了外边界的一半宽度（即，您得到了所需的外边界宽度）

有一条皱纹。每个方块的内容也会被覆盖。对于这个测试，我将内容放入伪元素的内容中。但这可能不适用于完全一般的情况，我们必须考虑在每个正方形内放置一个额外的元素及其内容，并在伪元素上方显示该元素

假设这是目前的预期结果：

下面是片段。请注意，尺寸和颜色已被放入CSS变量中，以便更容易尝试不同的布局

*{
保证金：0；
填充：0；
}
#孩子1{
顶部：0px；
左：0px；
--背景：红色；
}
#孩子2{
顶部：var（--w）；
--背景：蓝色；
}
#孩子3{
顶部：0px；
左：var（--w）；
--背景：绿色；
}
.孩子{
--w:50px；/*每个正方形的宽度和高度*/
--b:2px；/*边框宽度*/
位置：绝对位置；
背景色：var（--bg）；
宽度：计算值（var（--w）-（2*var（--b））；
高度：计算值（var（--w）-（2*var（--b））；
边框：calc（2*var（--b））黑色固体；
}
.孩子：：之后{
内容：“1”；
位置：绝对位置；
背景色：var（--bg）；
顶部：计算值（var（--b）*-1）；
左：计算值（var（--b）*-1）；
宽度：计算值（var（--w）-var（--b））；
高度：计算值（var（--w）-var（--b））；
不透明度：1；
边框：1px透明实心；
z指数：9999；
}
#孩子1：之后{
内容：“1”；
}
#孩子2：之后{
内容：“2”；
}
#孩子3：之后{
内容：“3”；
}

像这样->？没错。你在那里做的和我现在做的很接近。我想知道是否有一些“css魔法”达到了同样的效果。你是在寻找一种动态的绘制边框的方法吗？有没有一种方法可以在不单独设置边框的情况下实现呢。在我的实际使用案例中，有几千个单元格，每个单元格单独计算其边框的速度都相当慢（因为这种计算逻辑需要响应，您可以拖放单元格）。您是否尝试过查看CSS中的

：nth-child（）

，您可以在其中定义

奇数
，
甚至
并选择第n个元素。这个css网格非常有趣，我会看一看。但对于我的用例，我认为这是行不通的（见第一篇文章中的编辑）。这正是我所寻找的，它能够处理我复杂的用例。太多了！太好了，做起来很有趣。如果您想让内容位于每个div中而不是“content”中，您可以将实心伪div更改为仅具有其特定颜色的边框，并将中间部分留空。