多邊框

原文出處：http://www.w3cplus.com/css3/css-secrets/multiple-borders.html

問題

Backgrounds & Borders Level 3?還是一份草案的時(shí)候，CSS WG 就在是否支持多重邊框的問題進(jìn)行了大量的探討，就像是討論多重背景圖片一樣。不幸的是，當(dāng)時(shí)認(rèn)為多重邊框的用處并不大，即使需要也可以使用border-image屬性來模擬。不過，WG顯然忘記了在 CSS 代碼中靈活地調(diào)整邊框，才是我們需要的，現(xiàn)在開發(fā)者只能使用一些Hack手段來模擬多重邊框，比如使用多重元素的嵌套來模擬多重邊框?，F(xiàn)在，我將告訴你一些更優(yōu)秀的方法，無需使用多余的標(biāo)簽即可實(shí)現(xiàn)多重邊框。

box-shadow解決方案

現(xiàn)在，大多數(shù)的時(shí)候都用box-shadow來創(chuàng)建陰影。不過，很少有人知道它還接受第四個(gè)參數(shù)（spread），該參數(shù)可以縮放陰影的范圍。比如下面的示例，我們創(chuàng)建了一個(gè)水平和垂直偏移量為0?的陰影，它就使用了上述所說的第四個(gè)參數(shù)：

background: yellowgreen;
box-shadow: 0 0 0 10px #655;

效果如下圖所示：

圖注：使用?box-shadow?模擬邊框線

這還不夠令人驚訝，因?yàn)樗臀覀兪褂?border?創(chuàng)建的邊框差不多。不過，強(qiáng)大的是我們可以使用逗號來創(chuàng)建任意數(shù)量的陰影。所以，只需要繼續(xù)添加陰影就可以實(shí)現(xiàn)多重陰影了，比如，添加一個(gè)顏色為?deeppink?的邊框：

background: yellowgreen;
box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;

唯一需要牢記的事情就是，box-shadow?屬性是疊在一起的，第一個(gè)陰影總是位于最頂層，所以你需要調(diào)整陰影的大小。比如，在上一段代碼中，我們希望最外層的邊框?yàn)?5px，那么我們就可以設(shè)置一個(gè)?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);

除了下述的少數(shù)情況外，使用?box-shadow?的解決方案都很好用：

• 陰影并不是邊框，它們并不占有實(shí)際的空間，也不能歸屬于?box-sizing?的范圍。不過，你可以通過使用內(nèi)邊距或外邊距（取決于陰影是內(nèi)部的還是外部的）占據(jù)額外的空間來模擬。
• 上述示例模擬的邊框是位于元素外部的。它不能捕獲類似懸停和點(diǎn)擊的鼠標(biāo)事件。如果事件很重要，那么可以通過添加?inset?關(guān)鍵字讓陰影出現(xiàn)在元素的內(nèi)部。注意，你可能需要添加額外的內(nèi)邊距來擴(kuò)充空間。

outline的解決方案

在某些情況下，如果我們只需要兩層邊框，那么我們只需要一層常規(guī)的邊框和一層outline?就可以實(shí)現(xiàn)。這也讓我們的邊框在樣式上保持了足夠的靈活性（比如我們想要一個(gè)虛線邊框），但是使用?box-shadow?的話，我們只能模擬出實(shí)線邊框。如下圖所示：

圖注：使用?box-shadow?模擬兩條輪廓線

background: yellowgreen;
border: 10px solid #655;
outline: 15px solid deeppink;

使用?outline?的另一個(gè)好處就是，我們可以通過?outline-offset?控制?outline?到元素邊框的距離，該屬性甚至可以接受負(fù)值。這對很多效果都非常有用，如下圖所示：

注：對于虛線樣式的輪廓線，通過給?outline-offset?設(shè)置負(fù)值，創(chuàng)建了一個(gè)基礎(chǔ)的縫紉效果

不過，這種方法也有一些限制：

• 就像起初說的那樣，這種方法只能模擬兩層邊框，因?yàn)槊總€(gè)元素只能創(chuàng)建一個(gè)?outline。如果需要創(chuàng)建多重邊框，那么只能使用?box-shadow?的方法。
• border-radius?并不能讓?outline?呈現(xiàn)圓角效果，所以，即使你的邊框是圓角的，outline?仍然是直角的（如下圖所示）。注意，CSS WG 認(rèn)為這是一個(gè) bug，在未來border-radius可能可以將?outline?變?yōu)閳A角。
• 根據(jù)?CSS User Interface Level 3 specification?的說法：“outliens?可能并不是矩形。”雖然大多數(shù)情況下它看起來像是矩形，但是在你使用這一方法時(shí)，還是需要進(jìn)行跨瀏覽器測試的。

圖注：通過outline創(chuàng)建的輪廓線并沒有貼合元素的圓角，這個(gè)問題在未來可能會被修正

border-colors解決方案

border-colors是一個(gè)獨(dú)特的屬性，從字面上來說就是為多邊框而生，只可惜的是，到目前為止這僅是Gecko內(nèi)核瀏覽器獨(dú)有的屬性。

如果不追究瀏覽器的兼容性，那么border-colors也可以實(shí)現(xiàn)多邊框的效果。在具體使用時(shí)，需要分成四邊邊框來寫：

-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>*; /*左邊邊框*/ 

雖然這種方式也能實(shí)現(xiàn)多邊框效果，但相比前兩種解決方案而言要麻煩一些,來看一個(gè)簡單示例：

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;

為了要實(shí)現(xiàn)三個(gè)顏色的多邊框效果，red占4px，green占3px和blue點(diǎn)4px。需要大費(fèi)周折。而且還不能直接寫border-colors，因?yàn)闉g覽器不識別這樣的屬性。

除此之外，目前瀏覽器對這個(gè)屬性支持度相當(dāng)?shù)娜??？梢哉f，它只是Firefox的私有屬性。

擴(kuò)展閱讀

• Multiple Backgrounds and Borders with CSS 2.1
• Multiple Borders
• Multiple Borders with CSS
• Multiple borders methods with CSS

總結(jié)

在CSS2.1的時(shí)代要實(shí)現(xiàn)多邊框的效果，大多數(shù)都是依賴于添加標(biāo)簽或依賴于偽元素實(shí)現(xiàn)。而今天實(shí)現(xiàn)多邊框的方案也越來越多，比如box-shadow和outline等。雖然這些方法能更好的幫助大家實(shí)現(xiàn)多邊框效果，但每一種方案都有其自己的利弊。不過隨著技術(shù)的向前發(fā)展，說不定哪一天會有一個(gè)屬性直接有支持多邊框，就如Firefox的私有屬性-moz-border-<[top]|[right]|[bottom]|[left]>-colors。讓我們一起期待吧。