CSS边框长度控制功能的实现

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

<div class="content-block">
<div class="box-cont ai ner">
<div class="border -t op">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 {
    pos IT ion: 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;
        h ei ght: 7px;
        width: 50%;
        background-color: #8796a9;
    }
.border-left {
    background: # DF dad6;
    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;
    }

效果如下图：

总结

以上所述是小编给大家介绍的CSS边框长度控制功能的实现， 希望对大家有所帮助 ，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你 觉得 本文对你有帮助，欢迎 转载 ，烦请注明出处，谢谢！

总结

以上是 为你收集整理的 CSS边框长度控制功能的实现 全部内容，希望文章能够帮你解决 CSS边框长度控制功能的实现 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于CSS边框长度控制功能的实现的详细内容...