资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

CSS3中怎么实现多重边框

CSS3中怎么实现多重边框，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

超过十余年行业经验，技术领先，服务至上的经营模式，全靠网络和口碑获得客户，为自己降低成本，也就是为客户降低成本。到目前业务范围包括了：网站设计制作、网站制作，成都网站推广，成都网站优化，整体网络托管，成都微信小程序，微信开发，成都app开发，同时也可以让客户的网站和网络营销和我们一样获得订单和生意！

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

效果图：
CSS3中怎么实现多重边框

html代码

XML/HTML Code复制内容到剪贴板

  1.   

  2.     div嵌套实现多重边框

  

    •   

    css代码

    CSS Code复制内容到剪贴板

    1. #outer {   

    2.     width: 100px;   

    3.     height: 100px;   

    4.     background-color: bisque;   

    5.     border: 10px solid brown;   

    6.     position: relative;   

    7. }   

    8.     

    9. #inner {   

    10.     width: 84px;   

    11.     height: 84px;   

    12.     border: 8px 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. outlie实现多重边框

      

    css代码

    CSS Code复制内容到剪贴板

    1. #outline {   

    2.     width: 84px;   

    3.     height: 84px;   

    4.     border: 8px solid blue;   

    5.     /*-webkit-border-radius: 5px; 

    6.     -moz-border-radius: 5px; 

    7.     border-radius: 5px;*/  

    8.     outline: 10px solid brown;   

    9.     outline-offset: 0px;   

    10.     /*border和outline之间的距离*/  

    11.     margin: 20px;   

    12.     /*因为outline不影响布局，使用margin给边框腾位置*/  

    13. }  

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

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

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

    html代码

    XML/HTML Code复制内容到剪贴板

    1. boxshadow实现多重边框(外投影)  

    css代码

    CSS Code复制内容到剪贴板

    1. #boxShadow {   

    2.     margin: 40px;   

    3.     /*因为box-shadow不影响布局，使用margin给边框腾出位置*/  

    4.     width: 84px;   

    5.     height: 84px;   

    6.     border: 8px 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. boxshadow实现多重边框(内投影)  

    css代码

    CSS Code复制内容到剪贴板

    1. /*使用box-shadow一次性设置多个边框，并且使用内嵌投影*/  

    2. #moreboxShadow {   

    3.     width: 120px;   

    4.     height: 120px;   

    5.     border: 8px solid blue;   

    6.     /*注意：向外扩张的距离要每次累加；内嵌投影即添加参数为inset,该参数可选，当不设置时即为外投影*/  

    7.     -webkit-box-shadow: inset 0 0 0 10px brown, inset 0 0 0 20px yellow, inset 0 0 0 30px green;   

    8.     box-shadow: inset 0 0 0 10px brown, inset 0 0 0 20px yellow, inset 0 0 0 30px green;   

    9.     padding: 30px;   

    10.     /*设置内边距，为box-shadow添加的添加的边框疼位置，这样就不会影响元素之间的位置*/  

    11. }  

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

    缺点：CSS3属性，兼容性不好

    看完上述内容，你们掌握CSS3中怎么实现多重边框的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！


    网站名称：CSS3中怎么实现多重边框
    分享链接：http://cdkjz.cn/article/gjiese.html
    返回首页 了解更多建站资讯

    相关资讯

    多年建站经验

    多一份参考，总有益处

    联系快上网，免费获得专属《策划方案》及报价

    咨询相关问题或预约面谈，可以通过以下方式与我们联系

    大客户专线   成都：13518219792   座机：028-86922220

    在线咨询 提交需求
    友情链接 交换友情链接
    成都网络推广公司网站排名优化成都网站代运营定制网站开发资阳服务器托管铁科精智测控梓潼网站设计成都搅拌罐车ssl数字证书力比特工程

    成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

    成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

    专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图