这篇文章主要介绍了关于CSS实现多重边框的5种方式 ,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下
简言
目前最优雅地实现多重边框的方案是利用CSS3
的 box-shadow
属性,但如果要兼容老的浏览器,则需要选择其它的方案。本文简要地列举了几种多重边框的实现方案,大家可以根据项目实际及兼容性要求等情况,选择最适合的实现方案。
1 利用描边(outline
)属性
方案1利用描边(outline
)属性结合border
属性实现双重边框。此方案实现简单,兼容性好,能兼容除IE6,7
以外的浏览器。
1.1 核心代码
.borders { border: solid 6px #fff; outline: solid 6px #888; }
1.2 演示程序
演示程序