创建一个约2个div的边框

Question

只是一个简单的问题......

我已经创建了两个div - 基本上是两个正方形，一个是大正方形 - 一个位于另一个之下。

我想在这两个div周围画一个边框来勾勒出整个形状 - 不是像我在图片中所做的那样围绕两个div的轮廓 - 它留下了我在图像中盘旋的线。这可能吗？

以下是div的html和css：

#shapeTop {
  height: 70px; 
  width: 70px; 
  background: blue; 
  float: right; 
  outline: 4px solid black;
}
 
 #shapeBottom {
  height: 420px; 
  width: 420px; 
  background: blue; 
  clear: both; 
  float: right; 
  outline: 4px solid black;
}

<div id="shape">
  <div id="shapeTop">
  </div>
  
  <div id="shapeBottom">
  </div>
</div>

提前谢谢你 - G

Answer 1

使用border，禁用顶部框的底部边框，将position: relative添加到顶部框，使其显示在底部框的顶部，然后使用translateY()推送顶部框向下4 px所以它覆盖了底部框的边框。

#shapeTop {
  height: 70px; 
  width: 70px; 
  background: blue; 
  float: right; 
  border: solid black;
  border-width: 4px 4px 0;
  position: relative;
  transform: translateY(4px);
}
 
 #shapeBottom {
  height: 420px; 
  width: 420px; 
  background: blue; 
  clear: both; 
  float: right; 
  border: 4px solid black;
}

<div id="shape">
  <div id="shapeTop">
  </div>
  
  <div id="shapeBottom">
  </div>
</div>

Answer 2

很简单，只需将顶部框的border-bottom属性设置为0px或无，（并将所有outlines转换为borders）。

然后，将底部框的border-top设置为无。

最后，在底部框中添加一个：before伪元素（您还必须在底部框中设置position: relative;）。这个：在元素之前应该包含以下代码：

#bottomBox:before {
content: ""; // needed any :before element
position: absolute; // needed for following code
left: 0; // 
top: 0;  // sets it to start at the top left
height: 2px; /*  thickness of border */
width: 150px; /* adjust this until its the correct length */
background-color: black; /* color of border */

}

Answer 3

将border-bottom设置为0px不会从大方块中删除border-top，我建议设置：border-bottom：5px solid blue;并在#shapeBottom下面有#shapeTop并在最后一行中拥有该属性 - 在这种情况下，它将覆盖上面的所有内容。