> 原文出處：http://www.w3cplus.com/css3/css-secrets/multiple-borders.html ## 問題 [Backgrounds & Borders Level 3](http://www.w3.org/TR/css3-background/)?還是一份草案的時候，CSS WG 就在是否支持多重邊框的問題進行了大量的探討，就像是討論多重背景圖片一樣。不幸的是，當時認為多重邊框的用處并不大，即使需要也可以使用[`border-image`](http://www.w3cplus.com/content/css3-border-image)屬性來模擬。不過，WG顯然忘記了在 CSS 代碼中靈活地調整邊框，才是我們需要的，現在開發者只能使用一些Hack手段來模擬多重邊框，比如使用多重元素的嵌套來模擬多重邊框。現在，我將告訴你一些更優秀的方法，無需使用多余的標簽即可實現多重邊框。 ## box-shadow解決方案 現在，大多數的時候都用[`box-shadow`](http://www.w3cplus.com/content/css3-box-shadow)來創建陰影。不過，很少有人知道它還接受[第四個參數（spread）](http://www.w3cplus.com/css3/css3-box-shadows-unnoticed-spread)，該參數可以縮放陰影的范圍。比如下面的示例，我們創建了一個水平和垂直偏移量為`0`?的陰影，它就使用了上述所說的第四個參數： ~~~ background: yellowgreen; box-shadow: 0 0 0 10px #655; ~~~ 效果如下圖所示：  *圖注：使用?`box-shadow`?模擬邊框線* 這還不夠令人驚訝，因為它和我們使用?`border`?創建的邊框差不多。不過，強大的是我們可以使用逗號來創建任意數量的陰影。所以，只需要繼續添加陰影就可以實現多重陰影了，比如，添加一個顏色為?**deeppink**?的邊框： ~~~ background: yellowgreen; box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink; ~~~ 唯一需要牢記的事情就是，`box-shadow`?屬性是疊在一起的，第一個陰影總是位于最頂層，所以你需要調整陰影的大小。比如，在上一段代碼中，我們希望最外層的邊框為?`5px`，那么我們就可以設置一個?`15px`(`10px + 5px`) 的陰影。如果你需要，那么就可以為指定任意層次的陰影： ~~~ background: yellowgreen; box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink, 0 2px 5px 15px rgba(0,0,0,.6); ~~~ 除了下述的少數情況外，使用?`box-shadow`?的解決方案都很好用： * 陰影并不是邊框，它們并不占有實際的空間，也不能歸屬于?`box-sizing`?的范圍。不過，你可以通過使用內邊距或外邊距（取決于陰影是內部的還是外部的）占據額外的空間來模擬。 * 上述示例模擬的邊框是位于元素外部的。它不能捕獲類似懸停和點擊的鼠標事件。如果事件很重要，那么可以通過添加?`inset`?關鍵字讓陰影出現在元素的內部。注意，你可能需要添加額外的內邊距來擴充空間。 ## outline的解決方案 在某些情況下，如果我們只需要兩層邊框，那么我們只需要一層常規的邊框和一層`outline`?就可以實現。這也讓我們的邊框在樣式上保持了足夠的靈活性（比如我們想要一個虛線邊框），但是使用?`box-shadow`?的話，我們只能模擬出實線邊框。如下圖所示：  *圖注：使用?`box-shadow`?模擬兩條輪廓線* ~~~ background: yellowgreen; border: 10px solid #655; outline: 15px solid deeppink; ~~~ 使用?`outline`?的另一個好處就是，我們可以通過?`outline-offset`?控制?`outline`?到元素邊框的距離，該屬性甚至可以接受負值。這對很多效果都非常有用，如下圖所示：  *注：對于虛線樣式的輪廓線，通過給?`outline-offset`?設置負值，創建了一個基礎的縫紉效果 * 不過，這種方法也有一些限制： * 就像起初說的那樣，這種方法只能模擬兩層邊框，因為每個元素只能創建一個?`outline`。如果需要創建多重邊框，那么只能使用?`box-shadow`?的方法。 * `border-radius`?并不能讓?`outline`?呈現圓角效果，所以，即使你的邊框是圓角的，`outline`?仍然是直角的（如下圖所示）。注意，CSS WG 認為這是一個 bug，在未來`border-radius`可能可以將?`outline`?變為圓角。 * 根據?[CSS User Interface Level 3 specification](http://www.w3.org/TR/css3-ui/)?的說法：“`outliens`?可能并不是矩形。”雖然大多數情況下它看起來像是矩形，但是在你使用這一方法時，還是需要進行跨瀏覽器測試的。  *圖注：通過`outline`創建的輪廓線并沒有貼合元素的圓角，這個問題在未來可能會被修正* ## border-colors解決方案 [border-colors](http://www.w3cplus.com/content/css3-border-color)是一個獨特的屬性，從字面上來說就是為多邊框而生，只可惜的是，到目前為止這僅是Gecko內核瀏覽器獨有的屬性。 如果不追究瀏覽器的兼容性，那么`border-colors`也可以實現多邊框的效果。在具體使用時，需要分成四邊邊框來寫： ~~~ -moz-border-top-colors: <color> <color> <color>*; /*頂邊邊框*/ -moz-border-right-colors:<color> <color> <color>*; /*右邊邊框*/ -moz-border-bottom-colors: <color> <color> <color>*; /*底邊邊框*/ -moz-border-left-colors: <color> <color> <color>*; /*左邊邊框*/ ~~~  雖然這種方式也能實現多邊框效果，但相比前兩種解決方案而言要麻煩一些,來看一個簡單示例： ~~~ border: 10px solid; -moz-border-top-colors: red red red red green green green blue blue blue; -moz-border-bottom-colors: red red red red green green green blue blue blue; -moz-border-right-colors: red red red red green green green blue blue blue; -moz-border-left-colors: red red red red green green green blue blue blue; ~~~ 為了要實現三個顏色的多邊框效果，`red`占`4px`，`green`占`3px`和`blue`點`4px`。需要大費周折。而且還不能直接寫`border-colors`，因為瀏覽器不識別這樣的屬性。 除此之外，目前瀏覽器對這個屬性支持度相當的弱。可以說，它只是Firefox的私有屬性。 ## 擴展閱讀 * [Multiple Backgrounds and Borders with CSS 2.1](http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/) * [Multiple Borders](https://css-tricks.com/snippets/css/multiple-borders/) * [Multiple Borders with CSS](http://www.impressivewebs.com/multiple-borders-css/) * [Multiple borders methods with CSS](https://carst.me/2011/08/multiple-borders-methods-css/) ## 總結 在CSS2.1的時代要實現[多邊框的效果](http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/)，大多數都是依賴于添加標簽或依賴于偽元素實現。而今天實現多邊框的方案也越來越多，比如`box-shadow`和`outline`等。雖然這些方法能更好的幫助大家實現多邊框效果，但每一種方案都有其自己的利弊。不過隨著技術的向前發展，說不定哪一天會有一個屬性直接有支持多邊框，就如Firefox的私有屬性`-moz-border-<[top]|[right]|[bottom]|[left]>-colors`。讓我們一起期待吧。