在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，或將其設置為none（並將所有outlines轉換為borders ）。

然后，將底部框的border-top設置為none。

最后，在底部框中添加一個：before偽元素（您還必須在底部框中設置position: relative; ）。 ：before元素應包含以下代碼：

#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純藍色； 並將#shapeTop放在#shapeBottom之下，並在最后一行具有該屬性-在這種情況下，它將覆蓋上面的所有內容。