海鬼的博客

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>

CSS

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

效果图