在css3中我們知道可以使用box-shadow屬性輕松的為元素添加陰影效果，並且可以設置多組效果，每組參數值用逗號隔開。如果把box-shadow特性的兩個偏移量 h-shadow 、v-shadow設置為0，將模糊值blur也設置為0，此時增加擴張半徑，就會使元素的投影變為實線邊框。這樣就可以模擬多邊框效果了，首先看下box-shadow語法和參數。
box-shadow語法：
box-shadow：x-shadow y-shadow blur spread color inset;參數說明：
- x-shadow：設置對象的陰影水平偏移值，單位可以是px、em或百分比等，允許負值。
- y-shadow：設置對象的陰影垂直偏移值，單位可以是px、em或百分比等，允許負值。
- blur：用於設置邊框陰影半徑大小。
- spread：擴展半徑，設置陰影的尺寸；這個參數可選，缺省時值為0。
- color：設置陰影的顏色；
- inset：這個參數默認不設置。默認情況下為外陰影，inset表示內陰影。
box-shadow實現多邊框：
div{ box-shadow: 0 0 0 10px red, 0 0 0 16px green, 0 2px 5px 16px rgba(0,0,0,.5); background: yellowgreen; }效果如下：
熊貓辦公https://www.wode007.com/sites/73654.html
outline實現
如果我們只需要2層邊框，那么使用outline是不錯的選擇，先設置常規的border邊框，再加上outline（描邊）。而且outline比上面的box-shadow還有一大優點就是，可以生成虛線等邊框。通常outline屬性需要和對應的描邊偏移outline-offset來實現。
div{ width: 200px; height: 100px; background: #ffffff; border: 5px solid #53cfa2; outline: #736e21 dashed 1px; outline-offset: -20px; }效果如下：
