有没有办法用css为所有div添加重叠边框？

Question

我在这里搜索了一下,但我找到了关于相邻边界的信息.有人知道是否可以为所有div添加边框,只是为了查看当前布局的工作原理.

如果你只是添加一个1px的边框,它会增加2px的宽度(并排),并且 - 有时 - 会破坏当前的布局.

我需要这只是为了控制目的,打开/关闭,而不是生产.

谢谢!

Answer 1

你可以更好地使用outline属性而不是border,因为

• 轮廓不占用空间,因为它们总是放在元素框的顶部,这可能导致它们与页面上的其他元素重叠.
• 与边框不同,轮廓不允许我们将每条边设置为不同的宽度,或为每条边设置不同的颜色和样式.
• 各方面的轮廓是相同的.
• 除了重叠之外,轮廓对周围元素没有任何影响.
• 与边框不同,轮廓不会更改元素的大小或位置.

.outline-outer,.border-outer{
  height:100px;
  width:100px;
  border:solid 1px blue;
}
.border{
  height:80px;
  width:50px;
  border:solid 1px red;
  float:left;
}
.outline{
   height:80px;
  width:50px;
  outline:solid 1px red;
  float:left;
}

<div class="outline-outer">
  <div class="outline"></div>
  <div class="outline"></div>Outlined
</div>
<br/><br/><br/>
<div class="border-outer">
  <div class="border"></div>
  <div class="border"></div>Bordered
</div>

在这里小提琴