在 CSS 中如何设置边框的尺寸

发布时间：2023-09-01 14:36:10 所属栏目：语言来源：

导读：在这篇文章中，我们来学习一下“CSS中的边框长度怎么控制其大小”的相关知识，下文有详细的讲解，易于大家学习和理解，有需要的朋友可以借鉴参考，下面就请大家跟着小编的思路一起来学习一下吧。

以前

在这篇文章中，我们来学习一下“CSS中的边框长度怎么控制其大小”的相关知识，下文有详细的讲解，易于大家学习和理解，有需要的朋友可以借鉴参考，下面就请大家跟着小编的思路一起来学习一下吧。

以前需要边框长度比容器小一些时，我用div嵌套。后来发现伪类在实现这个效果时很方便，只需要一个div就够了，另外调整padding和margin都不会很麻烦。

<div class="content-block">

<div class="box-container">

<div class="border-top">border top</div>

</div>

<div class="box-container">

<div class="border-left">border left</div>

</div>

<div class="box-container">

<div class="border-right">border right</div>

</div>

<div class="box-container">

<div class="border-bottom">border bottom</div>

</div>

</div>

.box-container {

    position: relative;

    width: 90%;

    color: #777;

}

.border-top {

    background: #b4bcbf;

    padding: 15px;

}

    .border-top:before {

        content: '';

        position: absolute;

        left: 42%;

        top: 0;

        bottom: auto;

        right: auto;

        height: 7px;

        width: 50%;

        background-color: #8796a9;

    }

.border-left {

    background: #dfdad6;

    padding: 15px;

}

    .border-left:before {

        content: '';

        position: absolute;

        left: 0;

        top: 6%;

        bottom: auto;

        right: auto;

        height: 52%;

        width: 5px;

        background-color: #a89d9e;

    }

.border-right {

    background: #eee9c4;

    padding: 15px;

}

    .border-right:after {

        content: '';

        position: absolute;

        left: auto;

        top: auto;

        bottom: 5px;

        right: 0;

        height: 52%;

        width: 5px;

        background-color: #f39c81;

    }

.border-bottom {

    background: #bcdc9d;

    padding: 15px;

}

    .border-bottom:after {

        content: '';

        position: absolute;

        left: 18px;

        top: auto;

        bottom: 0;

        right: auto;

        height: 6px;

        width: 105px;

        background-color: #32b66b;

    }

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!