是否可以使用CSS在页边距外添加边框?

本教程将介绍是否可以使用CSS在页边距外添加边框?的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

是否可以使用CSS在页边距外添加边框? 教程 第1张

问题描述

我非常肯定已经有人问过这个问题,但我在Google上或这里都找不到。我只是好奇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>

好了关于是否可以使用CSS在页边距外添加边框?的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。