要設(shè)置多重邊框，最要用到的是box-shadow這個(gè)樣式。
box-shadow 的作用是添加投影。
div {
width: 300px;
height: 300px;
margin: 100px auto;
background: #c33;
border: 10px solid #036;
color: #fff;
font-size: 30px;
text-align: center;
line-height: 300px;
box-shadow: 5px 5px 10px #888;
}
如果要設(shè)置多個(gè)陰影，還可以用逗號(hào)進(jìn)行分別設(shè)置。
div {
width: 300px;
height: 300px;
margin: 100px auto;
background: #c33;
border: 10px solid #036;
color: #fff;
font-size: 30px;
text-align: center;
line-height: 300px;
box-shadow: 5px 5px 10px #888, 10px 10px 10px #9c0;
}
正常添加陰影的話，填好以上參數(shù)就行。
box-shadow: 5px 5px 10px #888;
第一個(gè)參數(shù)：橫向偏移的值（負(fù)左，正右）
第二個(gè)參數(shù)：縱向偏移的值（負(fù)上，正下）
第三個(gè)參數(shù)：投影的半徑，也就是羽化。值越大，模糊和擴(kuò)散的程度越大。
以上是添加陰影的基礎(chǔ)部分,下面開(kāi)始制作多重邊框
多重邊框
要用 box-shadow 來(lái)設(shè)置多重邊框，需要用到 box-shadow 另一個(gè)不常用的參數(shù)（擴(kuò)張半徑），同時(shí)前3個(gè)參數(shù)要設(shè)置為0。即偏移量和模糊值都為0。
div {
width: 300px;
height: 300px;
margin: 100px auto;
background: #c33;
border: 10px solid #036;
color: #fff;
font-size: 30px;
text-align: center;
line-height: 300px;
box-shadow: 0 0 0 10px #9c0;
}
如果需要設(shè)置多重邊框，可以用逗號(hào)分隔語(yǔ)法，這樣就可以創(chuàng)建任意數(shù)量的投影了。
box-shadow: 0 0 0 10px #9c0 , 0 0 0 20px #ffc, 0 0 0 30px #9cf;
需要注意的是，box-shadow是層層疊加的，也就是說(shuō)第一層投影位于頂層，以此類(lèi)推。因此，需要做的是按照這個(gè)規(guī)律來(lái)調(diào)整擴(kuò)張的半徑。
就比如在這個(gè)例子中，第一個(gè)投影用了10px，第二個(gè)投影就要用大于10px的值才能看出效果，除非前一個(gè)投影設(shè)置了半透明顏色。
缺點(diǎn)：
用 box-shadow 設(shè)置的多重邊框最大的缺點(diǎn)就是不能設(shè)置虛線等其他樣式的邊框。
outline
如果只是需要2層邊框，可以先設(shè)置一層常規(guī)邊框（border），再加上outline（描邊）屬性來(lái)產(chǎn)生外層的邊框。
outline 設(shè)置參數(shù)的方法和 border 是一樣的。
width: 300px;
height: 300px;
margin: 100px auto;
background: #c33;
color: #fff;
font-size: 30px;
text-align: center;
line-height: 300px;
border: 10px solid #036;
outline: 10px solid #9c0;
outline還可以設(shè)置成虛線，同時(shí)通過(guò) outline-offset 可以設(shè)置 outline和元素邊緣之間的距離。
width: 300px;
height: 300px;
margin: 100px auto;
background: #369;
color: #fff;
font-size: 30px;
text-align: center;
line-height: 300px;
outline: 2px dashed #fff;
outline-offset: -16px;
outline 設(shè)置成 2像素的白色虛線。
通過(guò) outline-offset 方法把 outline 設(shè)置在元素內(nèi)部（負(fù)值），此時(shí)看上去就有點(diǎn)像是縫邊的效果。
缺點(diǎn)：
用outline設(shè)置的邊框不能產(chǎn)生圓角效果。也就是不會(huì)貼合元素的圓角。
希望以上筆記對(duì)大家有幫助。
