有关单元素利用css实现多重边框效果实例详解

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了有关单元素利用css实现多重边框效果实例详解，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2891字，纯文字阅读大概需要5分钟。

内容图文

前言

最近在工作中遇到一个值得思考的问题，在CSS中，要实现同一种效果可能有很多种方式，就比如今天所要讲的多重边框，有人可能会想，那还不简单？要多少边框直接嵌套多少个带边框的p元素不就行了么！

是的，这样确实简单粗暴，但是也会因此产生很多毫无实际意义的元素。

事实上，要实现同样效果，一个元素足矣！

接下来我将给大家分享单元素如何实现多重边框效果~~

一、双重边框效果

<!--HTML-->
<p class="box"></p>

/*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实现多重边框效果实例详解的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的有关单元素利用css实现多重边框效果实例详解全部内容，希望文章能够帮你解决有关单元素利用css实现多重边框效果实例详解所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端