在第二个框外添加第三个框

Question

我写了一个简单的代码，让两个框居中对齐不同的尺寸，现在我想根据第二个（灰色）的尺寸添加第三个，并在第二个之外开始。 第二个（灰色）是核心，第三个是我想成为围绕核心的线圈，但它有自己的尺寸。 这就是为什么我想基于秒的维度。 请问你能帮我做吗？ 非常感谢您提前！

亲切的问候， 乔治

这是代码：

 <html> <head> <style> #container { display: flex; justify-content: center; align-items: center; } .box1 { display: flex; justify-content: center; align-items: center; margin: 50px; background: black; height: 50px; width: 200px; border-radius:20px } .box2 { display: flex; justify-content: center; align-items: center; margin: -1000px; background: grey; height: 10px; width: 100px; border-radius:5px } </style> </head> <div id="container"> <div class="box1"> <div class="box2"> <div></div> </div> </div> </div><!-- end #container --> </html>

Answer 1

因此，将灰色视为核心，将其周围的红色边框视为线圈。 这是你想要的方式吗？

 #container { display: flex; justify-content: center; align-items: center; } .box1 { display: flex; justify-content: center; align-items: center; margin: 50px; background: black; height: 50px; width: 200px; border-radius: 20px } .box2 { display: flex; justify-content: center; align-items: center; margin: -1000px; background: grey; height: 10px; width: 100px; border-radius: 5px; position: relative; } .box2:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 2px solid red; border-radius: 5px; }

 <div id="container"> <div class="box1"> <div class="box2"> </div> </div> </div> <!-- end #container -->