CSS实现多重边框的5种方式

这篇文章主要介绍了关于CSS实现多重边框的5种方式 ,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

简言

目前最优雅地实现多重边框的方案是利用CSS3box-shadow属性,但如果要兼容老的浏览器,则需要选择其它的方案。本文简要地列举了几种多重边框的实现方案,大家可以根据项目实际及兼容性要求等情况,选择最适合的实现方案。

CSS多重边框

1 利用描边(outline)属性

方案1利用描边(outline)属性结合border属性实现双重边框。此方案实现简单,兼容性好,能兼容除IE6,7以外的浏览器。

1.1 核心代码

.borders {  
border: solid 6px #fff;  
outline: solid 6px #888;  
}

1.2 演示程序

利用outline实现双重边框

演示程序

1.3 说明

郑重声明:本文版权包含图片归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们(delete@yzlfxy.com)修改或删除,多谢。

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

留言与评论(共有 0 条评论)
昵称:
匿名发表
   
验证码: