CSS3实现多重边框的方法总结

方法1：div嵌套实现多重边框。

效果图：

html代码

</div>

1. <div id="outer">  
2.     <div id="inner">div嵌套实现多重边框</div>  
3. </div>  

</div> </div>

css代码

</div>

1. #outer {   
2.     width: 100px;   
3.     height: 100px;   
4.     background-color: bisque;   
5.     border: 10px solid brown;   
6.     position: relative;   
7. }   
8.     
9. #inner {   
10.     width: 84px;   
11.     height: 84px;   
12.     border: 8px solid blue;   
13. }   
14. /*#outer,  
15. #inner {  
16.     -webkit-border-radius: 5px;  
17.     -moz-border-radius: 5px;  
18.     border-radius: 5px;  
19. }*/  

</div> </div>

缺点：可能无法修改结构或修改html结构成本高；多个div都设置圆角时，边框之间不能完全贴合。圆角多边框效果图：

方法2：使用outline+outline-offset实现多重边框。
如果我们只需要绘制两层边框，使用outline也可以做到。outline是border外面的一层，和border原理一样。通过设定outline的样式可以为border外面再设定一层边框。
但是需要注意的是，outline属性设定的边框不会随着内部元素边界样式的变化而变化。也就是说，如果元素边框带了圆角，那么outline绘制出的最外层边框仍然是矩形的。这是outline绘制边框的一个缺憾。
效果图：

html代码

</div>

1. <div id="outline">outlie实现多重边框</div>  

</div> </div>

css代码

</div>

1. #outline {   
2.     width: 84px;   
3.     height: 84px;   
4.     border: 8px solid blue;   
5.     /*-webkit-border-radius: 5px;  
6.     -moz-border-radius: 5px;  
7.     border-radius: 5px;*/  
8.     outline: 10px solid brown;   
9.     outline-offset: 0px;   
10.     /*border和outline之间的距离*/  
11.     margin: 20px;   
12.     /*因为outline不影响布局，使用margin给边框腾位置*/  
13. }  

</div> </div>

优点：它跟边框类似，可以设置各种线型，比如