怎么在CSS中控制边框长度

这期内容当中小编将会给大家带来有关怎么在CSS中控制边框长度，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

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

上述就是小编为大家分享的怎么在CSS中控制边框长度了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注亿速云行业资讯频道。