时间戳

首页 > 解决方案 > CSS - 围绕一组 div 的边框

html - CSS - 围绕一组 div 的边框

问题描述

我是后端开发人员，试图在前端方面做得更好。我想知道是否有任何方法，如果您有一组彼此相邻的 div 在它们不代表方形时在它们周围绘制边框。这是我正在尝试的示例：

#child1 {
  top: 0px; 
  left: 0px;
  background:red;
}
#child2 {
  top: 50px; 
  left: 0px;
  background:blue;
}
#child3 {
  top: 0px; 
  left: 50px;
  background:green;
}
.child {
  position: absolute; 
  width: 48px;
  height: 48px;
  border: 2px black solid;
}
<div>
  <div style="position: relative" class="parent">
    <div id="child1" class="child">1</div>
    <div id="child2" class="child">2</div>
    <div id="child3" class="child">3</div>
  </div>
</div>

https://jsfiddle.net/udxes0z3/

我想要你可以看到的边界，但不是“1”+“3”和“1”+“2”之间的边界。有什么办法可以通过CSS？我想避免以编程方式计算这些边界（这就是我目前正在做的事情，这会导致性能问题）。

感谢任何提示或告诉我这是不可能的;-)

*编辑

与“真实”问题相比，该示例过于简化，实际形状可能如下所示：

实际形状示例

标签： htmlcss

解决方案

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

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

然后，这覆盖了边界周围的一半。并且当正方形的边界相互重叠时，它们之间的这些重叠的正方形覆盖了内部边界并留下了外部边界宽度的一半（即您获得了所需的外部宽度）。

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

假设这是现在的愿望结果： 在此处输入图像描述

这是片段。请注意，尺寸和颜色已放入 CSS 变量中，以便更轻松地尝试不同的布局。

* {
  margin: 0;
  padding: 0;
}

#child1 {
 top: 0px; 
 left: 0px;
 --bg: red;
}

#child2 {
 top:  var(--w);
 --bg: blue;
}

#child3 {
 top: 0px; 
 left:  var(--w);
 --bg: green;
}
.child {
 --w: 50px;/* width and height of each square */
 --b: 2px;/* width of border */
 position: absolute;
 background-color: var(--bg);
 width: calc(var(--w) - (2 * var(--b)));
 height: calc(var(--w) - (2 * var(--b)));
 border: calc(2 * var(--b)) black solid;
}

.child::after {
  content: '1';
  position: absolute;
  background-color: var(--bg);
  top: calc(var(--b) * -1);
  left: calc(var(--b) * -1);
  width: calc(var(--w) - var(--b));
  height: calc(var(--w) - var(--b));
  opacity: 1;
  border: 1px transparent solid;
  z-index: 9999;
}

#child1::after {
  content: '1';
}

#child2::after {
  content: '2';
}

#child3::after {
  content: '3';
}
<div>
 <div style="position: relative" class="parent">
   <div id="child1" class="child"></div>
   <div id="child2" class="child"></div>
   <div id="child3" class="child"></div>
 </div>
</div>

推荐阅读