CSS3中怎么实现多重边框
CSS3中怎么实现多重边框，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。
超过十余年行业经验，技术领先，服务至上的经营模式，全靠网络和口碑获得客户，为自己降低成本，也就是为客户降低成本。到目前业务范围包括了：网站设计制作、网站制作，成都网站推广，成都网站优化，整体网络托管，成都微信小程序，微信开发，成都app开发，同时也可以让客户的网站和网络营销和我们一样获得订单和生意！
方法1：div嵌套实现多重边框。
效果图：
html代码
XML/HTML Code复制内容到剪贴板
css代码
CSS Code复制内容到剪贴板
#outer {
width: 100px;
height: 100px;
background-color: bisque;
border: 10px solid brown;
position: relative;
}
#inner {
width: 84px;
height: 84px;
border: 8px solid blue;
}
/*#outer,
#inner {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}*/
缺点：可能无法修改结构或修改html结构成本高；多个div都设置圆角时，边框之间不能完全贴合。圆角多边框效果图：
方法2：使用outline+outline-offset实现多重边框。
如果我们只需要绘制两层边框，使用outline也可以做到。outline是border外面的一层，和border原理一样。通过设定outline的样式可以为border外面再设定一层边框。
但是需要注意的是，outline属性设定的边框不会随着内部元素边界样式的变化而变化。也就是说，如果元素边框带了圆角，那么outline绘制出的最外层边框仍然是矩形的。这是outline绘制边框的一个缺憾。
效果图：
html代码
XML/HTML Code复制内容到剪贴板
css代码
CSS Code复制内容到剪贴板
#outline {
width: 84px;
height: 84px;
border: 8px solid blue;
/*-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;*/
outline: 10px solid brown;
outline-offset: 0px;
/*border和outline之间的距离*/
margin: 20px;
/*因为outline不影响布局，使用margin给边框腾位置*/
}
优点：它跟边框类似，可以设置各种线型，比如虚线、实线。
缺点：outline不影响布局，需使用margin给边框腾位置。以防被其它元素覆盖。如果容器本身有圆角的话，描边并不能完全贴合圆角，效果图如下：
方法3：使用box-shadow 外投影实现多重边框。
box-shadow属性可以为盒模型设定投影。但是其实它还有设定边框的功能。
box-shadow可以传递五个参数，前两个参数表示投影的偏移量，第三个参数表示投影的模糊程度，第四个参数表示投影的扩张度，最后一个参数表示投影的颜色。然而我们平常很少用到第四个参数，在这里使用第四个参数，就可以让投影进行扩张，通过设定比较合适的值，就可以模拟出边框的效果了。
同样，box-shadow属性可以传入多个阴影的列表，用“,”分割即可。因此，只要我们定义一个阴影列表，并且递增的增加其扩张度参数的取值，就可以绘制出多重边框的效果了。
效果图：
html代码
XML/HTML Code复制内容到剪贴板
