首先呢咨堤，多重邊框椎木，從字面上理解就知道我們的目標是希望目標元素的邊框是一層又一層的沙热。
很顯然，border-image這種東西就不要考慮啦~ LEA姐姐告訴我們通過box-shadow這個屬性能夠?qū)崿F(xiàn)多重邊框：
box-shadow: *h-shadow* *v-shadow* *blur* *spread* *color* inset;
神奇的是一個box-shadow里面可以寫好多組
類似于上面的數(shù)值口注，這就比border（只有一層）好用多了有木有！而如果只希望呈現(xiàn)出一般solid邊框的效果君珠，只需要醬紫：
.wrapper{
margin: 300px auto;
width: 300px;
height: 200px;
background: yellowgreen;
box-shadow: 0 0 0 10px purple,0 0 0 15px pink,0 0 0 25px #ccc,0 0 0 30px orange inset;
}
CSS Secrets @多重邊框 - CSS娃娃 - CSS娃娃的博客
但是親們發(fā)現(xiàn)沒有寝志，有兩點是需要我們稍微留心一下的：
- 每一組值當中的shadow寬度并不是在前一組值的基礎(chǔ)上計算的，而是都相對于div.wrapper的“邊”來計算策添；
- 在顏色后面加上一個inset材部，邊框就真的跑到里面去了呢~
然而我會告訴你還有兩點也需要注意嗎？
- box-shadow不會被box-sizing所影響唯竹；
- :hover的時候乐导，box-shadow（outside the div）的部分是不會被算在內(nèi)噢~
當我們只需要兩層邊框的時候，除了border之外浸颓，別忘了還有個outline在默默地等候著我們的召喚物臂。
.wrapper{
margin: 300px auto;
width: 300px;
height: 200px;
background: yellowgreen;
border: 10px solid pink;
outline: 5px dashed purple;
}
CSS Secrets @多重邊框 - CSS娃娃 - CSS娃娃的博客
outline好包容，它把border都緊緊懷抱住了产上！
moreover棵磷，還有個outline-offset也比較討人喜歡呢！
.wrapper{
margin: 300px auto;
width: 300px;
height: 200px;
background: yellowgreen;
border: 10px solid pink;
outline: 5px dashed purple;
outline-offset: -20px;
}
CSS Secrets @多重邊框 - CSS娃娃 - CSS娃娃的博客
只要將outline-offset的值設(shè)為負數(shù)晋涣，它就有可能跑到div.wrapper的里面仪媒，LEA姐姐說這是縫邊的效果。
But姻僧！盡管它跑到了.wrapper的里面规丽，但它多border的愛是不變的蒲牧，因為這個負值還是從border的最外面開始算起的！真愛啊有木有赌莺！ further more冰抢，親們要知道，outline雖然很包容艘狭，但它不能因為border-radius的存在而改變自己那么方的實質(zhì)挎扰。outline很方，至少現(xiàn)在很方巢音。但是呢~ box-shadow就可以因為有border-radius的存在而產(chǎn)生一層一層又一層的圓角遵倦！看下方！上面是box-shadow的表現(xiàn)官撼，下面是outline的表現(xiàn)（瞧他是有多么固執(zhí)梧躺，但是說不定哪一天，它就彎了傲绣，哇哈哈哈哈......）掠哥。
CSS Secrets @多重邊框 - CSS娃娃 - CSS娃娃的博客
CSS Secrets @多重邊框 - CSS娃娃 - CSS娃娃的博客
