单元素利用css实现多重边框效果示例代码

前言

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

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

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

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

一、双重边框效果

使用border-style: double就可实现简单的双重边框效果，实现效果如下：

border-style: double
 

实现方法虽然简单，但是缺点也是非常明显：

     ① 无法精确控制双重边框的粗细及之间的间隔；

     ② 无法改变双重边框的样式，比如双重虚线边框；

     ③ 无法实现更多层次的边框效果。

二、双重多样化边框效果

对于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属性来实现圆角，只可惜其他浏览器下并无此属性），所以圆角双重边框无法实现；

     ② 同样无法实现更多层次的边框效果。

三、多重多样化边框效果