是否可以使用 CSS 在边距外添加边框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40399876/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to add border outside the margin using CSS?
提问by Obed Marquez Parlapiano
I'm pretty sure someone has asked this question already, but I couldn't find it anywhere on Google or here. I'm just being curious here as to the limitations of CSS regarding this.
我很确定已经有人问过这个问题，但我在谷歌或这里找不到任何地方。我只是对 CSS 在这方面的局限性感到好奇。
Is it possible to add the border of an element outside the margin using CSS? Basically, I want the border to be placed outside of the margin instead of outside the padding.
是否可以使用 CSS 在边距外添加元素的边框？基本上，我希望将边框放置在边距之外而不是填充之外。
I understand how the box model works in CSS, for this reason I don't think it's possible to do what I'm asking. However, has anyone found any hacks to go around this?
我了解盒子模型在 CSS 中的工作原理，因此我认为不可能按照我的要求去做。然而，有没有人发现任何黑客来解决这个问题？
Thanks!
谢谢！
采纳答案by BoltClock
You won't be able to do this with just the element's box since a box is defined by its border edge, not its margin edge, and having borders outside an element's margin edge would interfere with margin collapse.
您将无法仅使用元素的框来执行此操作，因为框是由其边框边缘而非边距边缘定义的，并且元素边框边缘之外的边框会干扰边距折叠。
You could cheat by creating a pseudo-element with your desired border, but IMO it's more trouble than it's worth. The element itself needs to have a margin value equal to your intended margin amount plusyour desired border width, and the pseudo-element needs to be absolutely positioned with the element as its containing block, and extend out of the box by this sum (assuming you don't want the border to eat into the margins):
您可以通过创建具有所需边框的伪元素来作弊，但 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>Furthermore, this falls completely apart once you have more than one such element due to margin collapse — and there is no way around this other than to manually adjust specific margins of specific elements to compensate:
此外，一旦由于边距折叠而拥有多个这样的元素，这将完全崩溃——除了手动调整特定元素的特定边距以进行补偿之外，别无他法：
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>回答by Trevor F
I will note that there is 1 small hack using Box-Shadows that you can implement.
我会注意到，您可以使用 Box-Shadows 实现 1 个小技巧。
A box shadow extends beyond the padding of the object. the "Shadow" by default is the exact size of the box, which you can then shift left/right, up/down.
框阴影延伸到对象的填充之外。默认情况下，“阴影”是框的确切大小，然后您可以向左/向右、向上/向下移动。
So for instance, i could have a style of:
box-shadow : 0 -15px 0 #f7f7f7
例如，我可以有以下风格：
box-shadow : 0 -15px 0 #f7f7f7
which would give me a '15px border" to the top
这会给我一个“15px边框”到顶部
This is only useful though if you need 1 side have a border, like if you are using bootstrap and you want the text to be at the 'top' of the bootstrap column but want to encase it in a color, you can extend the background color on top using a box shadow.
这仅在您需要 1 边有边框时才有用，例如如果您使用引导程序并且您希望文本位于引导程序列的“顶部”但想要将其包裹在颜色中，您可以扩展背景使用框阴影在顶部着色。
