这里有一个很大的初学者，但我正在尝试将我的div排成一行，这样边框设计就不会在它们接触的地方变得过于粗。
由于某种原因，我无法使用pre来编写html，因此我将以纯文本形式编写。
.site {
display: flex;
flex-direction: row;
height: 100%;
width: 100%;
align-items: stretch;
}
.box1 {
background: #000000;
background: #000000;
background: #000000;
margin: 0px;
padding: 0px;
width: 55px;
height: 100%;
border: 3px solid black;
background-color: white;
}
.box2 {
background: #000000;
background: #000000;
background: #000000;
margin: -3px;
padding: 0px;
width: 730px;
height: 100%;
border: 3px solid black;
background-color: white;
}<div class="site">
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
</div>我还没有达到这一点，但我也希望整个.site周围有一个 3 px 的黑色边框。我基本上想要一个带有 3 px 黑色边框的.site，以及不同组件之间的 3 px 分隔线。
我为你准备了一个小代码。您可以从两个代码段中选择任何一个。
情况 1：您的 .site 类的 3px 边框，以及整洁干净的div，以区分 .site 类和其中的两个div。
.site, .box1, .box2{
display: flex;
padding:7px;
border:3px solid black;
}<div class="site">
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
</div>情况2：略微更改边框，但根据您的需要，在这种情况下，.site类的3px边框也将保持不变。
.site{
display:flex;
border:3px solid black;
padding: 5px;
}
.box1, .box2{
border: 3px solid black;
}<div class="site">
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
</div>希望这有帮助。
在 box2 中尝试以下 CSS：
.box2{
background: #000000;
background: #000000;
background: #000000;
padding: 0px;
width: 730px;
height: 100%;
border: 3px solid black;
border-left: 0;
background-color: white;
}
要使整个网站具有边框，您可以为<body>指定边框。 对于您的元素，您是否尝试过为相关边提供仅 1.5px 的边框？