我相信有人已经问过这个问题了,但是我在谷歌和这里都找不到答案。我只是因为好奇而询问CSS的限制。
使用CSS是否可以将元素的边框添加到边距外?基本上,我希望边框放置在边距的外部,而不是放置在填充的外部。
我理解CSS中盒子模型的工作原理,因此我认为不可能做到我所要求的。然而,有人发现了绕过这个问题的任何技巧吗?
谢谢!
我相信有人已经问过这个问题了,但是我在谷歌和这里都找不到答案。我只是因为好奇而询问CSS的限制。
使用CSS是否可以将元素的边框添加到边距外?基本上,我希望边框放置在边距的外部,而不是放置在填充的外部。
我理解CSS中盒子模型的工作原理,因此我认为不可能做到我所要求的。然而,有人发现了绕过这个问题的任何技巧吗?
谢谢!
仅使用元素的框是无法实现此操作的,因为框是由其边界而非外边距边界定义的。在一个元素的外边距边界上设置边框会干扰边距折叠。
您可以通过创建带有所需边框的伪元素来作弊,但在我看来,这样做比它值得的麻烦多了。元素本身需要具有等于您期望的外边距加上所需边框宽度的边距值,伪元素需要使用该和作为其包含块相对于元素的绝对定位,并延伸出框这个和(假设您不希望边框侵入边距):
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>
我需要提醒的是,你可以使用 Box-Shadows 实现一个小技巧。
Box-Shadows 可以超出对象的填充范围,“Shadow” 默认与框的大小相同,然后您可以左/右,上/下移动它。
例如,我可以使用以下样式:box-shadow : 0 -15px 0 #f7f7f7
这将给我一个“顶部15像素边框”。
但仅当您需要使一侧有边框时才有用。比如,如果您正在使用 Bootstrap 并且希望文本位于 bootstrap 列的“顶部”,但希望将其包裹在颜色中,则可以使用 Box-Shadows 在顶部延伸背景颜色。
box-shadow: 0px 0px 0px 13px #000;
- Daniel