CSS实现多重边框解决方案

1.box-shadow解决方案
首先，先看下box-shadow的语法: box-shadow: h-shadow v-shadow blur spread color inset;,其中第一、二个参数是分别是阴影的水平和垂直偏移量，第三个参数是阴影的模糊值，第四个参数是阴影的扩张半径（或叫尺寸/大小）<!--more-->。
利用两个为零的偏移量和一个为零的模糊值加上一个正值的扩张半径可以投影出一个实线边框。
eg.

background: yellowgreen;
box-shadow: 0 0 0 10px #655;

因为box-shadow支持逗号分隔法，因此我们可以创建任意数量的投影（边框）

background: yellowgreen;
box-shadow: 0 0 0 10px #655,
0 0 0 15px deeppink,
0 2px 5px 15px rgba(0,0,0,.6);//再加上一个正常的投影

使用多重投影解决方案需要注意的地方：
1.不受box-sizing影响
2.不响应鼠标事件，可以加上关键字inset来使投影绘制在元素内圈来解决
3.只能绘制实线边框

2.outline（描边）方案
首先，看下outline的语法：outline: outline-color outline-style outline-width。
利用outline可以实线两层边框

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

利用outline-offsert(outline-offset: length|inherit;)对描边进行偏移实现缝边效果,

background: #655;
border: 10px solid #655;
outline: 2px dashed white;
outline-offset: -10px;

使用outline方案需要注意的地方：
1.只能绘制两层边框
2.边框不会贴合border-radius产生的圆角，被css工作组认为是一个bug，未来可能会改变为贴合
3.边框的样式灵活（dotted、dashed、solid、double等等）,不局限于实线边框