多重边框

难题

众所周中，border 可以设置边框，但是有时我们需要多重边框呢？

ugly 方案

一个很容易想到的方案是多层元素嵌套，这个方案非常不优雅。

box-shadow 方案

box-shadow 接受第四个参数（扩张半径），通过指定正值或者负值，可以让投影面积增大或者减小。一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值，得到的 “投影” 其实就像一道实线边框。

同时，box-shadow 支持逗号分割语法，我们可以创建任意数量的投影。需要注意的是，box-shadow 是层层叠加的，第一层投影位于最顶层，依次类推。

需要注意的点：

• 投影的行为和边框不完全一致。因为它不影响布局，而且也不会受到 box-sizing 属性的影响。不过，你还是可以通过内边距或者外边距（这取决于投影是内嵌还是外扩的）来额外模拟出边框所需要占据的空间（参考上面的 demo 给 body 加了 padding，不然投影就会到视野外了）
• 投影创造的假边框出现在元素的 外圈。它们不会影响鼠标事件，如果这一点非常重要，你可以给 box-shadow 属性加上 inset 关键字，来使投影绘制在元素的 内圈。注意此时需要额外增加内边距来腾出足够的空隙（注意这时候颜色顺序也要跟之前相反，数值也要重新计算过）

outline 方案

在某些情况下，你可能只需要两层边框。可以先设置一层常规边框，再加上 outline（描边）属性来产生外层的边框。这种方法的一大优势在于边框样式十分灵活

描边的另外一个好处在于，你可以通过 outline-offset 属性来控制它跟元素边缘之间的间距，这个属性甚至可以 接受负值

我们可以实现一个简单的缝边效果：