多重边框

box-shadow的基本用法
box-shadow 属性向框添加一个或多个阴影。
box-shadow: h-shadow v-shadow blur spread color inset;
支持逗号语法，可以创建任意数量的投影

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。
inset	可选。将外部阴影 (outset) 改为内部阴影。

.mybox{
    margin: 300px auto;
    width: 5em;
    height: 3em;
    background: yellowgreen;
    box-shadow: 0 0 0 10px #655,0 0 0 15px deeppink,0 2px 5px 15px rgba(0,0,0,.6);
}

使用box-shadow来模拟双层外框

投影的行为不会影响布局，也不会受到box-sizing属性的影响，不会响应鼠标事件。

outline方案
在某些情况下，我们可能只需要两层边框，那就可以先设置一层常规边框，在加上outline（描边）属性来产生外层的边框。这种方法的一大优点在于边框样式十分灵活，不像上面的box-shadow方案只能模拟实线边框。因此实现以上效果还可以使用如下代码：

background: yellowgreen;
border:10px solid #655;
outline: 5px solid deeppink;

描边的另一个好处在于：你可以通过outline-offset属性来控制它跟元素边缘之间的间距（可接受负值）

利用outline-offset属性的负值创建的虚线（dashed）缝边

缺点：只适用于双层边框；描边不一定贴合圆角；描边可以不是矩形（但绝大多数是）