先来看我们要实现的效果 ：一个div外面有3个边框。该如何实现？只能用一个div来实现。

可能 有人会过来说：给div加个边框，然后再给div加两个伪类分别加上两个边框。完美实现。

恩，不可否认，完全可以实现，但是如果需求变一点点，我要实现有4个边框呢？5个呢?100个呢？

哈哈哈哈，是不是一脸蒙蔽。这时候就要借助我的大标题说的，box-shadow，等我细细说来。

我们一般用css3的box-shadow都是这样用的：

#box{box-shadow:0 0 10px rbga(0,0,0,.5)};后面跟了4个参数。

简单解释一下：前面的两个参数是x y两个轴的偏移，第三个参数是虚化的大小最后一个是颜色值。很简单吧。

但是我今天要说的是：box-shadow：后面可以跟五个参数。第四个参数就是可以用来实现边框的效果了。废话少说上代码:

总结：

1、前面的文章移动端页面性能杀手中我说过，尽量不要把box-shadow放在元素的样式中，而要放在伪类当中。

2、box-shadow中可以写多个阴影，用逗号分开。每一个阴影可以写个边框，那么理论上我们是不是可以实现N个border的效果了。

希望我的分享能给大家有所帮助。