CSS揭秘——多重边框

如果我们想为一个元素设置边框，很自然的会利用 border 属性，比如说，我想得到如下效果。

border1.png

非常简单的，我们只需要设置 border: 8px solid #22EAAA;。但是，如果我们需要为一个元素设置多重边框呢？该怎么做呢？因为对于一个元素而言， border 只能生效一次，所以我们需要寻找其它属性去模拟边框效果。

一般而言，有两种方案，分别是 box-shadow 和 outline，关于这二者的详细介绍如下

CSS box-shadow 属性
CSS outline 属性

关于 box-shadow ，它的第四个属性，也就是 spread 我认为它的效果和普通元素中的 padding 元素是相同的，就是将元素撑开(box-sizing: content-box的情况下)。

关于 outline 属性，火狐浏览器专门为其设置了一个 -moz-outline-radius 属性，其行为和 border-radius 相同，不过这个属性只有火狐中才有。

border2.png

为了实现以上效果，outline 形式：

  border: 8px solid #22EAAA;
  outline: 8px solid #B31E6F;

outline 实现的一大优点是简单，直观，因为它的使用和 border 几乎没有差别，第二个优点是 outline-offset 属性，可以让我们任意的控制它与元素边框的距离，而且它的值可以为负值。

不过，它也有缺点，第一，它不支持圆角，所以即使元素拥有圆角的 border，outline 却也只能是矩形。第二，不支持点击事件。

下面来看看 box-shadow 实现的代码：

  border: 8px solid #22EAAA;
  box-shadow: 0 0 0 8px #B31E6F;

我个人认为，box-shadow 相比于 outline 是个相对比较完美的方案。第一，box-shadow 可以以逗号分隔设置多组值，也就是说我们可以设置 > 2 边框（虽然没什么卵用，但是值得一提），通常情况下，我们可以先利用这个属性模拟出边框的效果，再利用它去设置盒子阴影效果。第二个优点是，我们可以利用一些变通让其支持点击事件，那就是最后一个属性 inset，我们可以为元素设置一个 padding，然后将边框设置在 padding 的位置上。

就上述而言，如果我们的需求比较简单，可以利用 outline 设置多重边框，如果需求自定义比较强，可以利用 box-shadow。

下面是利用多重边框实现的一个有意思的效果。

border3.png

代码如下：

   border: 10px solid #000;
   border-radius: 8px;
   background-color: #000;
   outline: 1px dashed #FFF;
   outline-offset: -10px;