在CSS中垛玻，要實(shí)現(xiàn)同一種效果可能有很多種方式，就比如今天所要講的多重邊框奶躯，有人可能會(huì)想帚桩，那還不簡(jiǎn)單？要多少邊框直接嵌套多少個(gè)帶邊框的DIV元素不就行了么嘹黔！
是的账嚎，這樣確實(shí)簡(jiǎn)單粗暴，但是也會(huì)因此產(chǎn)生很多毫無(wú)實(shí)際意義的元素儡蔓。
事實(shí)上郭蕉，要實(shí)現(xiàn)同樣效果，一個(gè)元素足矣喂江！
接下來(lái)我將給大家分享單元素如何實(shí)現(xiàn)多重邊框效果~~
一召锈、雙重邊框效果
<!--HTML-->
<div class="box"></div>
/*CSS*/
.box{ width: 200px; height: 200px; border: 10px double #000;}
使用border-style: double就可實(shí)現(xiàn)簡(jiǎn)單的雙重邊框效果，實(shí)現(xiàn)效果如下：
實(shí)現(xiàn)方法雖然簡(jiǎn)單获询，但是缺點(diǎn)也是非常明顯：
① 無(wú)法精確控制雙重邊框的粗細(xì)及之間的間隔涨岁；
② 無(wú)法改變雙重邊框的樣式，比如雙重虛線邊框筐付；
③ 無(wú)法實(shí)現(xiàn)更多層次的邊框效果卵惦。
二、雙重多樣化邊框效果
/*CSS*/
.box{ width: 200px; height: 200px; border: 1px solid #000; outline: 1px dashed #f00; outline-offset: 10px;}
對(duì)于outline屬性瓦戚，我們平時(shí)用得比較少沮尿，其代表元素的外輪廓，顯示于邊框外圍较解，大多數(shù)情況似乎都只是用于清除表單控件的默認(rèn)focus樣式：outline: none;
而事實(shí)上畜疾，outline可以制作出與border屬性近乎相同的效果，而且寫(xiě)法上也幾乎沒(méi)有差別印衔，但是這里還是大概講講這兩者存在的細(xì)微差別：
① outline不占據(jù)實(shí)際空間大小啡捶，這一點(diǎn)與box-shadow很像；
② outline不能像border一樣拆分成border-left奸焙、border-right等屬性瞎暑；
③ outline不能設(shè)置圓角彤敛。
上面例子中還用到了outline-offset屬性，這個(gè)屬性其實(shí)是outline在CSS3中新加的屬性了赌，該屬性不能合并簡(jiǎn)寫(xiě)在outline中墨榄，用于控制外邊框與外輪廓之間的距離。
這個(gè)實(shí)現(xiàn)方法也很簡(jiǎn)單勿她，而且更加靈活袄秩，但是也存在幾個(gè)缺點(diǎn)：
① outline屬性無(wú)法設(shè)置圓角（火狐下可以設(shè)置-moz-outline-radius屬性來(lái)實(shí)現(xiàn)圓角，只可惜其他瀏覽器下并無(wú)此屬性）逢并，所以圓角雙重邊框無(wú)法實(shí)現(xiàn)之剧；
② 同樣無(wú)法實(shí)現(xiàn)更多層次的邊框效果。
三砍聊、多重多樣化邊框效果
/*CSS*/
.box{ width: 200px; height: 200px; border: 10px solid #000; border-radius: 10px; box-shadow: 0 0 0 10px #f00, 0 0 0 20px #0f0, 0 0 0 30px #00f;}
這里使用了box-shadow屬性來(lái)替代outline屬性背稼，多重陰影效果疊加可以實(shí)現(xiàn)無(wú)數(shù)層邊框效果，與此同時(shí)也能使用圓角屬性border-radius來(lái)實(shí)現(xiàn)多重圓角邊框效果辩恼。
此實(shí)現(xiàn)方式雖然看起來(lái)已經(jīng)達(dá)到了我們最初想要實(shí)現(xiàn)的效果雇庙，但是該方法存在著一個(gè)非常顯著的缺點(diǎn)，那就是無(wú)法像outline或border一樣設(shè)置虛線邊框灶伊，所以使用該方法是無(wú)法實(shí)現(xiàn)多重虛線邊框效果的疆前。
兼容性： border當(dāng)然兼容性是最好的；其次是outline聘萨，可以兼容到IE8竹椒，但是outline-offset在IE下全軍覆沒(méi)；最后是box-shadow米辐，可以兼容到IE9胸完。
結(jié)束語(yǔ)： 本文所介紹的方法各有各自的優(yōu)缺點(diǎn)，在實(shí)際運(yùn)用當(dāng)中可以根據(jù)運(yùn)用場(chǎng)景靈活選擇翘贮，當(dāng)然赊窥，除了以上所寫(xiě)的三種方法之外，我們還可以結(jié)合偽元素來(lái)實(shí)現(xiàn)多重邊框狸页，其實(shí)最終實(shí)現(xiàn)原理還是本文的這幾種方法锨能，關(guān)于偽元素，你可以看我之前寫(xiě)的偽元素::before與::after的用法這篇文章芍耘。
