如果我們想為一個元素設置邊框，很自然的會利用 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

為了實現(xiàn)以上效果，outline 形式：

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

outline 實現(xiàn)的一大優(yōu)點是簡單，直觀，因為它的使用和 border 幾乎沒有差別，第二個優(yōu)點是 outline-offset 屬性，可以讓我們?nèi)我獾目刂扑c元素邊框的距離，而且它的值可以為負值。

不過，它也有缺點，第一，它不支持圓角，所以即使元素擁有圓角的 border，outline 卻也只能是矩形。第二，不支持點擊事件。

下面來看看 box-shadow 實現(xiàn)的代碼：

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

我個人認為，box-shadow 相比于 outline 是個相對比較完美的方案。第一，box-shadow 可以以逗號分隔設置多組值，也就是說我們可以設置 > 2 邊框（雖然沒什么卵用，但是值得一提），通常情況下，我們可以先利用這個屬性模擬出邊框的效果，再利用它去設置盒子陰影效果。第二個優(yōu)點是，我們可以利用一些變通讓其支持點擊事件，那就是最后一個屬性 inset，我們可以為元素設置一個 padding，然后將邊框設置在 padding 的位置上。

就上述而言，如果我們的需求比較簡單，可以利用 outline 設置多重邊框，如果需求自定義比較強，可以利用 box-shadow。

下面是利用多重邊框?qū)崿F(xiàn)的一個有意思的效果。

border3.png

代碼如下：

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