总结的方法实现多个边框通过CSS3
方法1：div嵌套实现多个边界。设计素描 uff1a
HTML代码
xml代码将内容复制到剪贴板。
多边界的div嵌套实现
CSS代码
CSS代码将内容复制到剪贴板。
{ #外
宽度：100px；
身高：100px；
背景颜色：浓汤；
边境：10px solid棕色；
职位：相对；
}
{ #内
宽度：84px；
身高：84px；
边境：8px固蓝；
}
/ * #外，
{ #内
WebKit的边界半径：5px；
-moz边界半径：5px；
边界半径：5px；
}
缺点：不可能以高代价修改结构或修改html结构；当多个div设置角时，边界不能完全匹配：
方法2：使用大纲+大纲偏移实现多个边界。
如果我们只需要画两层边框，我们可以用大纲来做，轮廓是边框的外层，和边框的原理一样，通过设置边框的样式可以在边框外面设置一层边框。
但是，需要注意的是，大纲属性所设置的框架不会随着内部元素边界样式的变化而改变，即如果元素边界有一个角，则边框的最外层边界仍然是矩形的，这是轮廓绘制边界的一个缺点。
设计素描 uff1a
HTML代码
xml代码将内容复制到剪贴板。
outlie实现多重边界
CSS代码
CSS代码将内容复制到剪贴板。
{ #轮廓
宽度：84px；
身高：84px；
边境：8px固蓝；
/ * WebKit的边界半径：5px；
-moz边界半径：5px；
边界半径：* 5px；
概述：10px solid棕色；
轮廓偏移：0px；
边界与轮廓之间的距离。
保证金：20px；
*因为大纲不影响布局，使用页边空白框滕的位置。
}
优点：与边框相似，可以设置各种线条类型，如虚线和实线。
缺点：外形不影响布局，使用边边的位置。防止被其他元素覆盖。如果容器本身有圆角，笔画不完全贴合圆角，图纸如下：
方法3：利用框影外投影实现多边界。
盒阴影属性可以设置框模型的投影，但也具有设置边框的功能。
方块阴影可以通过五个参数，前两个参数代表投影的偏移量，第三个参数表示投影的模糊性，第四个参数表示投影的展开，最后一个参数表示投影的颜色，但通常很少使用第四个参数。在这里使用第四个参数，我们可以展开投影，我们可以通过设置一个更合适的值来模拟边界的效果。
类似地，框阴影属性可以被传递到一个多个阴影的列表中，因此，只要我们定义一个阴影列表并增加其扩展参数的值，我们就可以绘制多个边界的效果。
设计素描 uff1a
HTML代码
xml代码将内容复制到剪贴板。
多边界boxshadow实现（外部投影）
CSS代码
CSS代码将内容复制到剪贴板。
{ # boxshadow
保证金：40px；
*因为框阴影不影响布局，所以使用空白来创建房间/框架。
宽度：84px；
身高：84px；
边境：8px固蓝；
WebKit的边界半径：5px；
-moz边界半径：5px；
边界半径：5px；
Webkit框阴影：000 10px棕色；
箱的影子：000 10px棕色；
参数是：水平偏移、垂直偏移、模糊距离、扩展距离和投影颜色。
}
优点：多个角在帧之间完全匹配；同时可以接收一个列表，同时设置多个投影（边框），其扩展效果基于元素本身的形状。如果元素是矩形，它会扩展到一个更大的矩形。如果元素有圆角，它也会扩大圆角。
缺点：CSS3属性，兼容性不好；箱影不影响布局，如果元素与其他元素之间的相对位置是很重要的，需要外部的利润等，这些额外的框架；腾出空间，防止其他元素覆盖。
注：嵌入式投影的使用（即盒阴影参数添加到默认的插图，外部阴影设置）似乎是一个更好的选择。由于嵌入式投影让投影出现在元件，设置在内部的元件的内部边缘给多个边界的位置，这是比较容易处理它。
方法4：使用框阴影内部投影实现多边框（推荐使用）。
设计素描 uff1a
HTML代码
xml代码将内容复制到剪贴板。
多边界boxshadow实施（内部投影）
CSS代码
CSS代码将内容复制到剪贴板。
使用一次性框阴影设置一个以上的帧，并使用内置投影。
{ # moreboxshadow
宽度：120px；
身高：120px；
边境：8px固蓝；
注意：添加到每个添加剂的距离的外部扩展；嵌入的投影参数被插入，参数是可选的，而不是当设置在投影之外。
Webkit框阴影：插图000 10px棕色，插图000 20px黄色，插图000 30px绿色；
盒子的影子：插图000 10px棕色，插图000 20px黄色，插图000 30px绿色；
填料：30px；
设置填充，疼痛位置为添加框框，因此不会影响元素之间的位置。
}
优点：内嵌的投影使投影出现在元素的内部，将元素内部的内边缘设置为多个边框，这样就更容易处理。
缺点：CSS3属性，兼容性差