单元素利用css实现多重边框效果示例代码
我要评论（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
前言
最近在工作中遇到一个值得思考的问题，在CSS中，要实现同一种效果可能有很多种方式，就比如今天所要讲的多重边框，有人可能会想，那还不简单？要多少边框直接嵌套多少个带边框的DIV元素不就行了么！
是的，这样确实简单粗暴，但是也会因此产生很多毫无实际意义的元素。
事实上，要实现同样效果，一个元素足矣！
接下来我将给大家分享单元素如何实现多重边框效果~~
一、双重边框效果
<!--HTML--> <div class="box"></div>
/*CSS*/
.box{ width: 200px; height: 200px; border: 10px double #000;}
使用border-style: double就可实现简单的双重边框效果，实现效果如下：
border-style: double
实现方法虽然简单，但是缺点也是非常明显：
① 无法精确控制双重边框的粗细及之间的间隔；
② 无法改变双重边框的样式，比如双重虚线边框；
③ 无法实现更多层次的边框效果。
二、双重多样化边框效果
/*CSS*/
.box{ width: 200px; height: 200px; border: 1px solid #000; outline: 1px dashed #f00; outline-offset: 10px;}
对于outline属性，我们平时用得比较少，其代表元素的外轮廓，显示于边框外围，大多数情况似乎都只是用于清除表单控件的默认focus样式：outline: none;
而事实上，outline可以制作出与border属性近乎相同的效果，而且写法上也几乎没有差别，但是这里还是大概讲讲这两者存在的细微差别：
① outline不占据实际空间大小，这一点与box-shadow很像；
② outline不能像border一样拆分成border-left、border-right等属性；
③ outline不能设置圆角。
上面例子中还用到了outline-offset属性，这个属性其实是outline在CSS3中新加的属性，该属性不能合并简写在outline中，用于控制外边框与外轮廓之间的距离。
outline属性
这个实现方法也很简单，而且更加灵活，但是也存在几个缺点：
① outline属性无法设置圆角（火狐下可以设置-moz-outline-radius属性来实现圆角，只可惜其他浏览器下并无此属性），所以圆角双重边框无法实现；
② 同样无法实现更多层次的边框效果。
三、多重多样化边框效果
/*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的用法这篇文章。
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对程序员之家的支持。
相关文章
- 这篇文章主要介绍了使用纯 CSS 创作一个渐变色动画边框,需要的朋友可以参考下2018-11-20
这篇文章主要介绍了CSS 制作带边框背景色透明的消息框的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-09-03
这篇文章主要给大家介绍了关于reset.css引入以及1px边框问题的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面2018-07-10
CSS3+SVG实现的文字边框线条流动动画特效源码一段实现了非常个性好看的led文字动画特效代码，由流动的线条边框组成的字体，非常不错2018-05-07
本文通过实例代码给大家介绍了基于csss3实现多样的边框效果，有半透明边框，多重边框，边框内圆角，具体效果图和实现代码大家参考下本文2018-05-04
是一段实现了当鼠标悬停在文字上时，文字周围就回出现线条边框动画特效，拥有5种从上、从下、从左、从右、从中等方法悬停边框动画，欢迎有喜欢的朋友们前来下载使用2018-03-13- 这篇文章主要介绍了css中引入svg来兼容部分安卓机显示0.5px边框的示例的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-22
- 这是一款由程序员之家翻译自国外网站的在线CSS工具，可在线调整生成样式的边框圆角效果，以及边框的宽度、颜色、样式等属性，还可实时预览生成的CSS代码，并支持一键复制代码2017-09-19
- 常常看到一种酷炫的效果，鼠标hover一片区域后，区域显示出虚线边框，并且还有线条动画，那么这种效果具体是怎么实现的呢，本文提供了几种思路，感兴趣的朋友跟随小编一起2019-05-08
最新评论