CSS多边框技巧

之前遇到一个需求，需要在一个图片下面实现层叠效果，如下：

感觉不是很难的样子，所以考虑用css实现，css实现边框主要考虑border\before\after\outline，但是before+after只能实现三层，outline无法只使用底边，所以重新研究了一下css多层border的实现，记录如下（有些效果IE不支持）

border属性：groove\ridge\double

当给一个元素应用多个边的时候，有各种各样的技术可以参考
其中最基础的，就是利用边框本身的样式，有参考价值的，就是groove\ridge\double这三个属性：

虽然看起来不错，但无论是groove、ridge还是double，都是单边的不同形式，而还不是真正的多边，我们将double的例子再增加一个背景色就明显了

红色背景填充了“两条边的间隙”，而有时，这可不是我们想要的

outline属性：outline\outline-offset

outline-offset属性不被IE所支持
双边框最合适的代码就是outline了，顾名思义，就是在border外面再套一层

这种方法非常好，局限是只支持两层，以及outline-offset的ie支持问题，没有outline-offset的话，两条边将是贴在一起的，与border的double属性不同的是，这个的边框就真的是套在外边了，从红色的范围即可看出

并且显然，outline的方法也无法实现只在某一条边上实现多边的效果

伪元素：before\after

伪元素实现五层边框

首先，一个z-index为1的红色边框紫色底色的div <div class='box'></div> .box{ width: 80%; height:100px; border: solid 5px red; background-color: purple; z-index: 1; position: relative; } 之后定义一个before和一个after分别绝对定位于该div，并且一次增大一圈，利用两层border和两层background-color，可以轻松实现五层边框的效果

.box:before {
   content: "";
   position: absolute;
   z-index: -1;
   top: 5px;
   left: 5px;
   right: 5px;
   bottom: 5px;
   border: 5px solid yellow;
   background: green;
}

.box:after {
   content: "";
   position: absolute;
   z-index: -1;
   top: 15px;
   left: 15px;
   right: 15px;
   bottom: 15px;
   border: 5px solid blue;
   background: white;
}

极限实现八层边框

如果我们再为每一个div、before、after加上outline，就达到了单一div容器通过before\after能够实现的极限：8个边框

伪元素可以实现只有底边

伪元素有一个巨大的优点是实现只有某一边的多层边，下面是一个底边的例子

.box-bottom{
  width: 80%;
  height:100px;
  border-bottom: solid 5px red;
  background-color: #e3e3e3;
  margin-top: 20px;
  margin-left: 20px;
  z-index: 1;
  position: relative;
}
.box-bottom:before {
   content: "";
   position: absolute;
   z-index: -1;
   top: 105px;
   width: 100%;
   height:5px;
   border-top: 5px solid orange;
   background: yellow;
   border-bottom: 5px solid green;
}
.box-bottom:after {
   content: "";
   position: absolute;
   z-index: -1;
   top: 120px;
   width: 100%;
   height:5px;
   border-top: 5px solid cyan;
   background: blue;
   border-bottom: 5px solid purple;
}

七层底边的构成：

1、div元素的底边
2、before元素的顶边
3、before元素的background-color
4、before元素的底边
5、after元素的顶边
6、after元素的background-color
7、after元素的底边

伪元素在完美边框的情况下，可以实现三层底边

上面的七层底边中有两条边是background-color伪装的，所以不能实现下面这样的细节，如果想实现多边带来的层叠效果，只能是三层：

.box-cascade:before {
   content: "";
   position: absolute;
   z-index: -1;
   border: solid 5px #d3d7d4;
   border-top: 0px;
   background-color: #fff;
   bottom: -15px;
   left: -5px;
   width: 100%;
   height:5px;
}
.box-cascade:after {
   content: "";
   position: absolute;
   z-index: -1;
   bottom:-25px;
   width: 100%;
   height:5px;
   border: solid 5px #d3d7d4;
   border-top: 0px;
   background-color: #fff;
   left: -5px;
}

这个实现了文章头部那张图片的效果,不过最多只能三层

对象阴影：box-shadow

css3推出了box-shadow属性之后，上边那些方法就弱爆了，通过不断的增加box-shadow，可以实现无限边框叠加！什么七彩虹，轻轻松松搞定

.box-shadow {
    border: 5px solid red;
    box-shadow:
      0 0 0 5px blue,
      0 0 0 10px yellow,
      0 0 0 15px green;
}

总结

有些东西可能并不实用，但又有什么关系呢？小边框里有大学问，细节里面藏魔鬼
目前来看，多边框就不要使用border的样式了，双层边框outline还是很合适的
before和after本质上是拿一个div当三个使，这种一气化三清的牛逼本事已经足以应付绝大多数情况了
box-shadow作为一个绘制阴影的新属性，只用于做边框，确实大材小用了

参考

[1]Multiple Backgrounds and Borders with CSS 2.1
这篇文章讲了用before\after伪元素实现的多背景图效果，十分有启发
[2]重温CSS：Border属性
这篇文章展示了边框更强大的用法
[3]用CSS代码写出的各种形状图形的方法