方法1：p嵌套實(shí)現(xiàn)多重邊框。

效果圖：

html代碼

<p id="outer">
 <p id="inner">p嵌套實(shí)現(xiàn)多重邊框</p>
</p>

css代碼

#outer { 
 width: 100px; 
 height: 100px; 
 background-color: bisque; 
 border: 10px solid brown; 
 position: relative; 
} 

#inner { 
 width: 84px; 
 height: 84px; 
 border: 8px solid blue; 
} 
/*#outer,
#inner {
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
}*/

缺點(diǎn)：可能無法修改結(jié)構(gòu)或修改html結(jié)構(gòu)成本高；多個(gè)p都設(shè)置圓角時(shí)，邊框之間不能完全貼合。圓角多邊框效果圖：

方法2：使用outline+outline-offset實(shí)現(xiàn)多重邊框。
如果我們只需要繪制兩層邊框，使用outline也可以做到。outline是border外面的一層，和border原理一樣。通過設(shè)定outline的樣式可以為border外面再設(shè)定一層邊框。
但是需要注意的是，outline屬性設(shè)定的邊框不會(huì)隨著內(nèi)部元素邊界樣式的變化而變化。也就是說，如果元素邊框帶了圓角，那么outline繪制出的最外層邊框仍然是矩形的。這是outline繪制邊框的一個(gè)缺憾。
效果圖：

html代碼

<p id="outline">outlie實(shí)現(xiàn)多重邊框</p>

css代碼

#outline { 
 width: 84px; 
 height: 84px; 
 border: 8px solid blue; 
 /*-webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;*/
 outline: 10px solid brown; 
 outline-offset: 0px; 
 /*border和outline之間的距離*/
 margin: 20px; 
 /*因?yàn)閛utline不影響布局，使用margin給邊框騰位置*/
}

優(yōu)點(diǎn)：它跟邊框類似，可以設(shè)置各種線型，比如虛線、實(shí)線。

缺點(diǎn)：outline不影響布局，需使用margin給邊框騰位置。以防被其它元素覆蓋。如果容器本身有圓角的話，描邊并不能完全貼合圓角，效果圖如下：

方法3：使用box-shadow 外投影實(shí)現(xiàn)多重邊框。
box-shadow屬性可以為盒模型設(shè)定投影。但是其實(shí)它還有設(shè)定邊框的功能。
box-shadow可以傳遞五個(gè)參數(shù)，前兩個(gè)參數(shù)表示投影的偏移量，第三個(gè)參數(shù)表示投影的模糊程度，第四個(gè)參數(shù)表示投影的擴(kuò)張度，最后一個(gè)參數(shù)表示投影的顏色。然而我們平常很少用到第四個(gè)參數(shù)，在這里使用第四個(gè)參數(shù)，就可以讓投影進(jìn)行擴(kuò)張，通過設(shè)定比較合適的值，就可以模擬出邊框的效果了。
同樣，box-shadow屬性可以傳入多個(gè)陰影的列表，用“,”分割即可。因此，只要我們定義一個(gè)陰影列表，并且遞增的增加其擴(kuò)張度參數(shù)的取值，就可以繪制出多重邊框的效果了。
效果圖：

html代碼

<p id="boxShadow">boxshadow實(shí)現(xiàn)多重邊框(外投影)</p>

css代碼

#boxShadow { 
 margin: 40px; 
 /*因?yàn)閎ox-shadow不影響布局，使用margin給邊框騰出位置*/
 width: 84px; 
 height: 84px; 
 border: 8px solid blue; 
 -webkit-border-radius: 5px; 
 -moz-border-radius: 5px; 
 border-radius: 5px; 
 -webkit-box-shadow: 0 0 0 10px brown; 
 box-shadow: 0 0 0 10px brown; 
 /*參數(shù)分別為：水平偏移量、垂直偏移量、模糊距離、向外擴(kuò)展距離和投影顏色*/
}

優(yōu)點(diǎn)：多個(gè)圓角邊框之間完全貼合；同時(shí)還可以接收一個(gè)列表，一次設(shè)置多個(gè)投影（即邊框）。它的擴(kuò)張效果是根據(jù)元素自己的形狀來的，如果元素是矩形，它擴(kuò)張開來就是一個(gè)更大的矩形；如果元素有圓角，它也會(huì)擴(kuò)張出圓角。

缺點(diǎn)：CSS3屬性，兼容性不好；box-shadow也不影響布局的，如果這個(gè)元素和其它元素的相對(duì)位置關(guān)系很重要，需要以外邊距等方式來為這些多出來的 “邊框” 騰出位置，以防被其它元素覆蓋。

注意：使用內(nèi)嵌投影（即box-shadow添加參數(shù)為inset，默認(rèn)不設(shè)置時(shí)為外陰影）似乎是更好的選擇。因?yàn)閮?nèi)嵌投影讓投影出現(xiàn)在元素內(nèi)部，設(shè)置內(nèi)邊距在元素的內(nèi)部給多個(gè)邊框騰位置，處理起來更容易一些。

方法4：使用box-shadow 內(nèi)投影實(shí)現(xiàn)多重邊框。(推薦使用)

效果圖：

html代碼

<p id="moreboxShadow">boxshadow實(shí)現(xiàn)多重邊框(內(nèi)投影)</p>

css代碼

/*使用box-shadow一次性設(shè)置多個(gè)邊框，并且使用內(nèi)嵌投影*/
#moreboxShadow { 
 width: 120px; 
 height: 120px; 
 border: 8px solid blue; 
 /*注意：向外擴(kuò)張的距離要每次累加；內(nèi)嵌投影即添加參數(shù)為inset,該參數(shù)可選，當(dāng)不設(shè)置時(shí)即為外投影*/
 -webkit-box-shadow: inset 0 0 0 10px brown, inset 0 0 0 20px yellow, inset 0 0 0 30px green; 
 box-shadow: inset 0 0 0 10px brown, inset 0 0 0 20px yellow, inset 0 0 0 30px green; 
 padding: 30px; 
 /*設(shè)置內(nèi)邊距，為box-shadow添加的添加的邊框疼位置，這樣就不會(huì)影響元素之間的位置*/
}

優(yōu)點(diǎn)：內(nèi)嵌投影讓投影出現(xiàn)在元素內(nèi)部，設(shè)置內(nèi)邊距在元素的內(nèi)部給多個(gè)邊框騰位置，處理起來更容易一些。

缺點(diǎn)：CSS3屬性，兼容性不好

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com