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

Question

我想为div绘制一个边框，而不占用任何额外的空间？，这意味着边框必须在div内。

Answer 1

您有3个选择：

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

Answer 2

你可以用负边距补偿它，或者只是使用轮廓。

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

或

div { outline: 10px solid red; }

或者你可以使用css3 boxshadow伪造边框......

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

Answer 3

尝试使用相当于边框的负边距，例如

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

Answer 4

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

Answer 5

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

更准确地说，具有0模糊度和一点扩展度的矩形阴影。

它创建的“边框”不在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>