如何在不占用任何额外空间的情况下为 div 渲染边框？答案

【问题标题】：How to render a border to a div without occupying any extra space?如何在不占用任何额外空间的情况下为 div 渲染边框？
【发布时间】：2023-03-29 22:06:01
【问题描述】：

如何在不占用任何额外空间的情况下为 div 应用边框？边框必须在 div 内。

【问题讨论】：

我使用的是 box-shadow 技术，它是在里面渲染的。

标签： css

【解决方案1】：

您有 3 个选择：

内盒和外盒（如@xpapad 所述）。
使用outline，例如outline:1px #000 solid;。 Read more。
使用 box-sizing，这是一个 css3 属性。例如，box-sizing:border-box;。 Read more。

【讨论】：

轮廓加一，使用边框如边框：纯黑色；它仍然占据着空间。
@Justcode 注意，轮廓就像装饰，而不是物理边框。它与下方 z-index 中的任何内容重叠。它没有尺寸，只有宽度和高度：P
@TaylorS 我同意。但它不占用空间。这就是我想要的
谢谢。我很久以前就需要它。

【解决方案2】：

你可以用负边距来补偿它，或者简单地使用轮廓。

div { border: 10px solid red; margin: -10px};

或

div { outline: 10px solid red; }

或者，您可以使用 css3 boxshadow 来伪造边框...

示例： http://jsfiddle.net/meo/K23s7/

【讨论】：

【解决方案3】：

尝试使用与边框等效的负边距，例如。

border-right:1px;
margin-right:-1px;

【讨论】：

不改变图像大小的圆形边框的好选择。

【解决方案4】：

对于我的用例，box-shadow 属性是正确的选择。

更准确地说，是 0 模糊和一点散布的 box-shadow。

它创建的“边框”不在 div 内部，但不会占用额外的 HTML 空间。

button {
    background: white;
    font-size:2rem;
    padding:1rem 2rem;
    color: #4f93df;
    border-radius: 2rem;
    margin:1rem;
}

.withABorder{
  box-shadow: 0px 0px 0px 4px #4f93df;
}

<div>
  <button>Hello</button>
  <button class="withABorder">World</button>
  <br>
  <button>Hello Again</button>
</div>

【讨论】：

【解决方案5】：

在当前 div 中包含一个内部 div，使用所需的边框。

【讨论】：

【解决方案6】：

另一种选择是使用box-shadow 添加边框，如下所示：

box-shadow: 0 1px 0 0 red; /* Border bottom */
box-shadow: 0 -1px 0 0 red; /* Border top */
box-shadow: -1px 0 0 0 red; /* Border left */
box-shadow: 1px 0 0 0 red; /* Border right */
box-shadow: 0 0 0 1px red; /* All the borders by using the spread properties */

【讨论】：