是否可以使用 CSS 在边距之外添加边框？

Question

我很确定已经有人问过这个问题，但我在 Google 或这里的任何地方都找不到。我只是对 CSS 在这方面的限制感到好奇。

是否可以使用 CSS 在边距之外添加元素的边框？基本上，我希望将边框放在边距之外，而不是在填充之外。

我了解盒子模型在 CSS 中的工作原理，因此我认为不可能按照我的要求进行操作。但是，有没有人发现任何黑客来解决这个问题？

谢谢！

Answer 1

你不能只用元素的盒子来做到这一点，因为盒子是由它的边框边缘定义的，而不是它的边缘边缘，并且在元素的边缘边缘之外有边框会干扰边缘折叠。

您可以通过创建具有所需边框的伪元素来作弊，但在 IMO 中，这比它的价值更麻烦。元素本身的边距值需要等于你的预期边距量加上你想要的边框宽度，并且伪元素需要以元素作为其包含块的绝对定位，并延伸到这个总和的盒子（假设你不希望边框吃掉边距）：

html {
    background-color: #fff;
}

body {
    float: left;
    background-color: #ccc;
}

div {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: #ff0;
    margin: 30px;
}

div::before {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    bottom: -30px;
    left: -30px;
    border: 5px solid #f00;
}

<div></div>

此外，一旦由于边距折叠而拥有多个这样的元素，这将完全崩溃——除了手动调整特定元素的特定边距以进行补偿之外，没有其他方法可以解决：

html {
    background-color: #fff;
}

body {
    float: left;
    background-color: #ccc;
}

div {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: #ff0;
    margin: 30px;
}

div::before {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    bottom: -30px;
    left: -30px;
    border: 5px solid #f00;
}

<div></div>
<div></div>
<div></div>

Answer 2

我会注意到，您可以使用 Box-Shadows 实现 1 个小技巧。

盒子阴影超出了对象的内边距。默认情况下，“阴影”是框的确切大小，然后您可以左/右、上/下移动。

例如，我可以有以下风格： box-shadow : 0 -15px 0 #f7f7f7

这会给我一个“15px 边框”到顶部

这仅在您需要一侧有边框时才有用，例如，如果您正在使用引导程序并且您希望文本位于引导程序列的“顶部”，但又想用颜色包裹它，您可以使用盒子阴影扩展顶部的背景颜色。