<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div {
margin: 50px auto;
width: 200px;
height: 200px;
background: yellowgreen;
box-shadow: 0 0 0 10px #655, 0 0 0 20px deeppink,0 0 0 30px brown, 10px 10px 5px 30px rgb(0, 0, 0, .5);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
box-shadow支持逗號分隔，比如像下面這樣，想加幾個邊框就加幾個，用逗號分隔開就行
box-shadow: 0 0 0 10px #655, 0 0 0 20px deeppink, 0 0 0 30px brown;
注：這裏要注意 box-shadow的第四個屬性，表示陰影的大小（就是上面代碼的10px，20px，30px）
如果你想要添加多條邊框，就需要把陰影大小的值依次遞增，否則無效
box-shadow: 0 0 0 10px #655, 0 0 0 20px deeppink,0 0 0 30px brown, 10px 10px 5px 30px rgb(0, 0, 0, .5);
注：如果你還要添加陰影效果，也需要把陰影大小的值進行調整，只能 >= 你設置的最後一條邊框的陰影大小值
比如上面代碼中的3條邊框陰影大小值分別爲，10px，20px，30px，那後面陰影的值只能設置30px，或比30px大
兩重邊框用outline
div {
margin: 50px auto;
width: 200px;
height: 200px;
background: yellowgreen;
border: 10px solid #655;
outline: 10px solid deeppink;
}
box-shadow屬性至多有6個參數設置，他們分別取值：
陰影類型：此參數是一個可選值，如果不設值，其默認的投影方式是外陰影；如果取其唯一值“inset”,就是將外陰影變成內陰影，也就是說設置陰影類型爲“inset”時，其投影就是內陰影；
X-offset:是指陰影水平偏移量其值可以是正負值可以取正負值，如果值爲正值，則陰影在對象的右邊，反之其值爲負值時，陰影在對象的左邊；
Y-offset:是指陰影的垂直偏移量，其值也可以是正負值，如果爲正值，陰影在對象的底部，反之其值爲負值時，陰影在對象的頂部；
陰影模糊半徑：此參數是可選，，但其值只能是爲正值，如果其值爲0時，表示陰影不具有模糊效果，其值越大陰影的邊緣就越模糊；
陰影擴展半徑：此參數可選，其值可以是正負值，如果值爲正，則整個陰影都延展擴大，反之值爲負值是，則縮小
陰影顏色：此參數可選，如果不設定任何顏色時，瀏覽器會取默認色，但各瀏覽器默認色不一樣，特別是在webkit內核下的safari和chrome瀏覽器將無色，也就是透明，建議不要省略此參數。