/*CSS*/
.box{ width: 200px; height: 200px; border: 10px solid #000; border-radius: 10px; box-shadow: 0 0 0 10px #f00, 0 0 0 20px #0f0, 0 0 0 30px #00f;}这里使用了box-shadow属性来替代outline属性，多重阴影效果叠加可以实现无数层边框效果，与此同时也能使用圆角属性border-radius来实现多重圆角边框效果。
box-shadow属性
此实现方式虽然看起来已经达到了我们最初想要实现的效果，但是该方法存在着一个非常显著的缺点，那就是无法像outline或border一样设置虚线边框，所以使用该方法是无法实现多重虚线边框效果的。
兼容性： border当然兼容性是最好的；其次是outline，可以兼容到IE8，但是outline-offset在IE下全军覆没；最后是box-shadow，可以兼容到IE9。
结束语
本文所介绍的方法各有各自的优缺点，在实际运用当中可以根据运用场景灵活选择，当然，除了以上所写的三种方法之外，我们还可以结合伪元素来实现多重边框，其实最终实现原理还是本文的这几种方法，关于伪元素，你可以看看写的伪元素::before与::after的用法这篇文章。
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对软件开发网的支持。
