多重邊框的兩種實(shí)現(xiàn)方案：
border-shadow
outline
<!DOCTYPE html>
<htmllang="en">
<head>
????<metacharset="UTF-8">
????<metaname="viewport"content="width=device-width, initial-scale=1.0">
????<metahttp-equiv="X-UA-Compatible"content="ie=edge">
????<title>Mutiple border</title>
</head>
<body>
????<style>
????????.common {
????????????width: 25vw;
????????????height: 20vh;
????????????margin: 10%;
????????????background: gray;
????????}
????????.box-shadow {
????????????box-shadow: 0 0 0 10px #655,
????????????????0 0 0 15px deeppink,
????????????????0px 2px 5px 15px hsla(240, 100%, 50%, .5);
????????}
????????.inner-box-shadow {
????????????background: white;
????????????box-shadow: inset 0 0 40px hsla(0, 100%, 50%, 1);
????????}
????????.outline {
????????????border: 2px solid hsla(280, 100%, 50%, 1);
????????????outline: 2px dashed hsla(0, 0%, 100%, 1);
????????????outline-offset: -15px;
????????????border-radius: 10px;
????????????outline-width: 2px;
????????}
????</style>
????<divclass="common box-shadow"></div>
????<divclass="common inner-box-shadow"></div>
????<divclass="common outline"></div>
</body>
</html>
box-shadow
以由逗號分隔的列表來描述一個(gè)或多個(gè)陰影效果程癌。該屬性可以讓幾乎所有元素的邊框產(chǎn)生陰影腺律。如果元素同時(shí)設(shè)置了 border-radius ，陰影也會有圓角效果袱巨。多個(gè)陰影的z-ordering 和多個(gè) text shadows 規(guī)則相同(第一個(gè)陰影在最上面)蟋定。
/* x偏移量 | y偏移量 | 陰影顏色 */
box-shadow:60px-16pxteal;
/* x偏移量 | y偏移量 | 陰影模糊半徑 | 陰影顏色 */
box-shadow: 10px5px5pxblack;
/* x偏移量 | y偏移量 | 陰影模糊半徑 | 陰影擴(kuò)散半徑 | 陰影顏色 */
box-shadow: 2px2px2px1pxrgba(0, 0, 0, 0.2);
/* 插頁(陰影向內(nèi)) | x偏移量 | y偏移量 | 陰影顏色 */
box-shadow: inset5em1emgold;
/* 任意數(shù)量的陰影张弛，以逗號分隔 */
box-shadow: 3px3pxred, -1em00.4emolive;
/* 全局關(guān)鍵字 */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;
指定單個(gè) box-shadow 的用法：
給出兩個(gè)、三個(gè)或四個(gè)數(shù)字值的情況意推。
如果只給出兩個(gè)值, 這兩個(gè)值將被瀏覽器解釋為x軸上的偏移量 <offset-x> 和y軸上的偏移量 <offset-y>豆瘫。
如果給出了第三個(gè)值, 這第三個(gè)值將被解釋為模糊半徑的大小 <blur-radius>。
如果給出了第四個(gè)值, 這第四個(gè)值將被解釋為擴(kuò)展半徑的大小 <spread-radius>菊值。
可選外驱， 插頁(陰影向內(nèi)) inset。
可選腻窒， 顏色值 <color>昵宇。
聲明多個(gè)shadows時(shí)， 用逗號將shadows隔開儿子。
outline
CSS的outline屬性是用來設(shè)置一個(gè)或多個(gè)單獨(dú)的輪廓屬性的簡寫屬性 瓦哎， 例如 outline-style, outline-width 和 outline-color。 多數(shù)情況下柔逼，簡寫屬性更加可取和便捷蒋譬。
輪廓與邊框在以下幾個(gè)方面存在不同：
輪廓不占據(jù)空間，它們被描繪于內(nèi)容之上愉适；
輪廓可以是非矩形的犯助。在Gecko/Firefox中，輪廓是矩形的儡毕，但是Opera則會圍繞元素結(jié)構(gòu)繪制非矩形的形狀也切；
/* 寬度 | 樣式 | 顏色 */
outline: 1pxsolidwhite;
outline-offset ：用于設(shè)置 outline 與一個(gè)元素邊緣或邊框之間的間隙。
outline是元素的輪廓腰湾，懸浮在元素邊框之上。元素和其輪廓之間是透明的疆股。也就是說费坊，它們之間的顏色會繼承父元素的背景色。
/* <length> values */
outline-offset: 3px;
outline-offset: 0.2em;
/* Global values */
outline-offset: inherit;
outline-offset: initial;
outline-offset: unset;
對web開發(fā)技術(shù)感興趣的同學(xué)旬痹，歡迎私信小編加群附井，不管你是小白還是大牛我都?xì)g迎讨越，還有大牛整理的一套高效率學(xué)習(xí)路線和教程與您免費(fèi)分享，同時(shí)每天更新視頻資料永毅。
