总之，实现多边框最优雅的方式就是使用CSS3的box-shadow属性，但是如果要兼容老浏览器，就需要选择其他解决方案。本文简单列举了几种多边框的实现方案。您可以根据实际项目和兼容性需求选择最合适的实施方案。1使用outline属性方案1使用outline属性结合border属性实现双边框。该方案实现简单，兼容性好，可以兼容IE6、7以外的浏览器。1.1核心代码.borders{border:solid6px#fff;大纲：实心6px#888；}1.2DemonstrationprogramDemonstrationprogram1.3指令只能实现双边框边框样式灵活，盒模型之间可以实现虚线等边框笔画另外会和外部元素重叠2使用extraDIV方案2使用extraDIV嵌套实现多边框。这也是唯一没有兼容性问题的解决方案。2.1核心代码.outer{border:solid6px#888;背景：#fff；}.inner{背景：#222；margin:6px;}2.2DemoprogramDemoprogram2.3说明兼容性好可以实现多边框，虚线边框等样式需要额外的DIV元素，增加了代码的复杂度。3使用伪元素方案3使用伪元素(:before)实现双边框。实现代码略复杂，属于hack实现方式，不推荐。3.1核心代码.borders{border:solid6px#fff;位置：相对；}.borders:before{内容：“”；位置：绝对；顶部：-12px；左：-12px；右：-12px；底部：-12px；border:solid6px#888;}3.2DemonstrationprogramDemonstrationprogram3.3说明IE6,7,8不兼容使用:after和:before和:after也可以同时应用实现三重边框4使用border-image属性方案4使用CSS3的border-image属性实现多边框。实现方法简单，但需要额外制作一帧图像，兼容性较差。4.1核心代码.borders{border:solid12pxtransparent;border-image:url('borders.jpg')12121212repeat;}4.2DemoprogramDemoprogram4.3说明图片分为9个区域如下图：包括四个角（1,2,3,4)、四个边(5、6、7、8)和中间区域(9)。重复意味着所有四个边都在相应的边框图块上重复。5使用box-shadow属性方案5使用box-shadow属性实现多边框。方案5是实现多边框最简单直接的方法。只需一行代码即可实现多种边框效果。使用box-shadow来实现边框有点hacky。5.1核心代码.borders{box-shadow:0006px#fff,00012px#888;}5.2演示程序演示程序5.3使用说明为了使用阴影来模拟边框，本例中使用了两种阴影效果。offset和blur值为0，适当调整阴影大小，从而达到双边框效果。因为一个阴影与另一个重叠，所以第二个阴影的大小设置为第一个阴影大小的两倍。关键部分是将模糊值设置为0，从而产生一个看起来与边框相同的边框状实心阴影。和outline属性一样，box-shadow属性可能会与周围的元素重叠，所以要适当设置元素的外边距。box-shadow的兼容性一般。6参考MDNborder-imageMDNbox-shadowMultipleBorderswithCSSSS-tricksMultipleBorders7结语本文简单介绍了5种实现多边框的方式，各有优缺点，大家要根据实际情况选择。文章中提到的部分文字和代码是在网上编译的。由于时间不够、能力有限等原因，存在文字描述不准确、代码测试不够充分等诸多问题。
