CSS 如何渲染一个无需占用额外空间的div边框

在本文中，我们将介绍如何使用CSS渲染一个无需占用额外空间的div边框。通常情况下，当我们给一个元素添加边框时，它会增加该元素的宽度和高度，从而改变了元素的布局。然而，有时我们可能希望仅呈现边框而不改变元素的实际大小和布局。下面我们将介绍两种方法来实现这个效果。

阅读更多：CSS 教程

1. 使用CSS ::before 伪元素

第一种方法是使用CSS的::before伪元素。通过在元素之前创建一个伪元素，并对该伪元素应用边框样式，我们可以实现一个仅呈现边框的效果，而不改变元素的布局。

<style>
    .border-div {
        position: relative;
    }

    .border-div::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: 2px solid black;
    }
</style>

<div class="border-div">
    <p>This is a div with border but without extra space.</p>
</div>

在上面的示例中，我们给.border-div元素添加了相对定位，并在其之前添加了一个伪元素::before。伪元素的大小通过设置top、left、right、bottom这四个属性为0来保证与父元素大小一致。然后，我们对伪元素应用了2px宽度的黑色边框。

这样一来，该div元素将呈现一个边框，但并不会占用额外的空间。

2. 使用outline属性

另一种方法是使用CSS的outline属性。与边框不同，outline属性可在不改变元素布局的情况下呈现边框效果。

<style>
    .border-div {
        outline: 2px solid black;
    }
</style>

<div class="border-div">
    <p>This is a div with border but without extra space.</p>
</div>

在上面的示例中，我们直接给.border-div元素应用了outline属性，并设置了2px宽度的黑色边框。

同样地，该div元素将呈现一个边框，而不会占用额外的空间。