CSS3实现多重边框的方法总结


Posted in HTML / CSS onMay 31, 2016

方法1:div嵌套实现多重边框。

效果图:
CSS3实现多重边框的方法总结

html代码

XML/HTML Code复制内容到剪贴板
  1. <div id="outer">  
  2.     <div id="inner">div嵌套实现多重边框</div>  
  3. </div>  

css代码

CSS Code复制内容到剪贴板
  1. #outer {   
  2.     width100px;   
  3.     height100px;   
  4.     background-color: bisque;   
  5.     border10px solid brown;   
  6.     positionrelative;   
  7. }   
  8.     
  9. #inner {   
  10.     width84px;   
  11.     height84px;   
  12.     border8px solid blue;   
  13. }   
  14. /*#outer,  
  15. #inner {  
  16.     -webkit-border-radius: 5px;  
  17.     -moz-border-radius: 5px;  
  18.     border-radius: 5px;  
  19. }*/  

缺点:可能无法修改结构或修改html结构成本高;多个div都设置圆角时,边框之间不能完全贴合。圆角多边框效果图:
CSS3实现多重边框的方法总结

方法2:使用outline+outline-offset实现多重边框。
如果我们只需要绘制两层边框,使用outline也可以做到。outline是border外面的一层,和border原理一样。通过设定outline的样式可以为border外面再设定一层边框。
但是需要注意的是,outline属性设定的边框不会随着内部元素边界样式的变化而变化。也就是说,如果元素边框带了圆角,那么outline绘制出的最外层边框仍然是矩形的。这是outline绘制边框的一个缺憾。
效果图:
CSS3实现多重边框的方法总结

html代码

XML/HTML Code复制内容到剪贴板
  1. <div id="outline">outlie实现多重边框</div>  

css代码

CSS Code复制内容到剪贴板
  1. #outline {   
  2.     width84px;   
  3.     height84px;   
  4.     border8px solid blue;   
  5.     /*-webkit-border-radius: 5px;  
  6.     -moz-border-radius: 5px;  
  7.     border-radius: 5px;*/  
  8.     outline10px solid brown;   
  9.     outline-offset: 0px;   
  10.     /*border和outline之间的距离*/  
  11.     margin20px;   
  12.     /*因为outline不影响布局,使用margin给边框腾位置*/  
  13. }  

优点:它跟边框类似,可以设置各种线型,比如虚线、实线。

缺点:outline不影响布局,需使用margin给边框腾位置。以防被其它元素覆盖。如果容器本身有圆角的话,描边并不能完全贴合圆角,效果图如下:
CSS3实现多重边框的方法总结

方法3:使用box-shadow 外投影实现多重边框。
box-shadow属性可以为盒模型设定投影。但是其实它还有设定边框的功能。
box-shadow可以传递五个参数,前两个参数表示投影的偏移量,第三个参数表示投影的模糊程度,第四个参数表示投影的扩张度,最后一个参数表示投影的颜色。然而我们平常很少用到第四个参数,在这里使用第四个参数,就可以让投影进行扩张,通过设定比较合适的值,就可以模拟出边框的效果了。
同样,box-shadow属性可以传入多个阴影的列表,用“,”分割即可。因此,只要我们定义一个阴影列表,并且递增的增加其扩张度参数的取值,就可以绘制出多重边框的效果了。
效果图:
CSS3实现多重边框的方法总结

html代码

XML/HTML Code复制内容到剪贴板
  1. <div id="boxShadow">boxshadow实现多重边框(外投影)</div>  

css代码

CSS Code复制内容到剪贴板
  1. #boxShadow {   
  2.     margin40px;   
  3.     /*因为box-shadow不影响布局,使用margin给边框腾出位置*/  
  4.     width84px;   
  5.     height84px;   
  6.     border8px solid blue;   
  7.     -webkit-border-radius: 5px;   
  8.     -moz-border-radius: 5px;   
  9.     border-radius: 5px;   
  10.     -webkit-box-shadow: 0 0 0 10px brown;   
  11.     box-shadow: 0 0 0 10px brown;   
  12.     /*参数分别为:水平偏移量、垂直偏移量、模糊距离、向外扩展距离和投影颜色*/  
  13. }  

优点:多个圆角边框之间完全贴合;同时还可以接收一个列表,一次设置多个投影(即边框)。它的扩张效果是根据元素自己的形状来的,如果元素是矩形,它扩张开来就是一个更大的矩形;如果元素有圆角,它也会扩张出圆角。

缺点:CSS3属性,兼容性不好;box-shadow也不影响布局的,如果这个元素和其它元素的相对位置关系很重要,需要以外边距等方式来为这些多出来的 “边框” 腾出位置,以防被其它元素覆盖。

注意:使用内嵌投影(即box-shadow添加参数为inset,默认不设置时为外阴影)似乎是更好的选择。因为内嵌投影让投影出现在元素内部,设置内边距在元素的内部给多个边框腾位置,处理起来更容易一些。

方法4:使用box-shadow 内投影实现多重边框。(推荐使用)

效果图:
CSS3实现多重边框的方法总结

html代码

XML/HTML Code复制内容到剪贴板
  1. <div id="moreboxShadow">boxshadow实现多重边框(内投影)</div>  

css代码

CSS Code复制内容到剪贴板
  1. /*使用box-shadow一次性设置多个边框,并且使用内嵌投影*/  
  2. #moreboxShadow {   
  3.     width120px;   
  4.     height120px;   
  5.     border8px solid blue;   
  6.     /*注意:向外扩张的距离要每次累加;内嵌投影即添加参数为inset,该参数可选,当不设置时即为外投影*/  
  7.     -webkit-box-shadow: inset 0 0 0 10px brown, inset 0 0 0 20px yellowinset 0 0 0 30px green;   
  8.     box-shadow: inset 0 0 0 10px brown, inset 0 0 0 20px yellowinset 0 0 0 30px green;   
  9.     padding30px;   
  10.     /*设置内边距,为box-shadow添加的添加的边框疼位置,这样就不会影响元素之间的位置*/  
  11. }  

优点:内嵌投影让投影出现在元素内部,设置内边距在元素的内部给多个边框腾位置,处理起来更容易一些。

缺点:CSS3属性,兼容性不好

HTML / CSS 相关文章推荐
前端面试必备之CSS3的新特性
Sep 05 HTML / CSS
CSS3转换功能transform主要属性值分析及实现分享
May 06 HTML / CSS
css3实现背景图片拉伸效果像桌面壁纸一样
Aug 19 HTML / CSS
CSS3毛玻璃效果(blur)有白边问题的解决方法
Nov 15 HTML / CSS
深入浅析CSS3中的Flex布局整理
Apr 27 HTML / CSS
详解HTML5中的标签
Jun 19 HTML / CSS
浅谈three.js中的needsUpdate的应用
Nov 12 HTML / CSS
html5 canvas绘制矩形和圆形的实例代码
Jun 16 HTML / CSS
html5 div布局与table布局详解
Nov 16 HTML / CSS
如何在Canvas中添加事件的方法示例
May 21 HTML / CSS
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
Apr 27 HTML / CSS
CSS巧用渐变实现高级感背景光动画
Dec 06 HTML / CSS
结合CSS3的新特性来总结垂直居中的实现方法
May 30 #HTML / CSS
图解CSS3制作圆环形进度条的实例教程
May 26 #HTML / CSS
CSS中的字体大小设置属性总结
May 24 #HTML / CSS
CSS3弹性盒模型flex box快速入门心得(必看篇)
May 24 #HTML / CSS
轻松掌握CSS3中的字体大小单位rem的使用方法
May 24 #HTML / CSS
CSS3中的Media Queries学习笔记
May 23 #HTML / CSS
详解CSS3的perspective属性设置3D变换距离的方法
May 23 #HTML / CSS
You might like
在线竞拍系统的PHP实现框架(二)
2006/10/09 PHP
php判断上传的Excel文件中是否有图片及PHPExcel库认识
2013/01/11 PHP
destoon实现资讯信息前面调用它所属分类的方法
2014/07/15 PHP
PHP之图片上传类实例代码(加了缩略图)
2016/06/30 PHP
Yii2.0框架实现带分页的多条件搜索功能示例
2019/02/20 PHP
JavaScript定时器详解及实例
2013/08/01 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
2015/03/04 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
2015/03/04 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
2016/05/10 Javascript
AngularJS API之copy深拷贝详解及实例
2016/09/14 Javascript
VueJs组件prop验证简单介绍
2017/09/12 Javascript
pm2发布node配置文件ecosystem.json详解
2019/05/15 Javascript
layui操作列按钮个数和文字颜色的判断实例
2019/09/11 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
2020/06/11 Javascript
vue element-ul实现展开和收起功能的实例代码
2020/11/25 Vue.js
Python中selenium实现文件上传所有方法整理总结
2017/04/01 Python
Python利用operator模块实现对象的多级排序详解
2017/05/09 Python
python http接口自动化脚本详解
2018/01/02 Python
浅谈Pandas 排序之后索引的问题
2018/06/07 Python
python 同时运行多个程序的实例
2019/01/07 Python
Python代码块及缓存机制原理详解
2019/12/13 Python
python函数map()和partial()的知识点总结
2020/05/26 Python
Tensorflow全局设置可见GPU编号操作
2020/06/30 Python
Python更改pip镜像源的方法示例
2020/12/01 Python
纯css3无js实现的Android Logo(有简单动画)
2013/01/21 HTML / CSS
美国在线宠物商店:Chewy
2019/01/12 全球购物
乐高奥地利官方商店:LEGO Shop AT
2019/07/16 全球购物
德国最新街头服饰网上商店:BODYCHECK
2019/09/15 全球购物
类和结构的区别
2012/08/15 面试题
介绍一下MYSQL常用的优化技巧
2012/10/25 面试题
应届生船舶驾驶求职信
2013/10/19 职场文书
一份创业计划书范文
2014/02/08 职场文书
《再见了,亲人》教学反思
2014/02/26 职场文书
2014年党务公开实施方案
2014/02/27 职场文书