CSS邊框長度控制

原文鏈接：https://blog.csdn.net/Colossalis_c/article/details/71216339

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;
    }

效果如下圖： 食用愉快~以上です。

轉載來源