纯CSS实现元素的镜框（多重边框）效果

纯CSS实现元素的镜框（多重边框）效果

 2016-09-24 14:38    网页设计   标签：css   1295    发表评论

刚才我们提到了元素的半透明边框（border）的一些用法技巧，现在我们又遇到一个比较特殊的事情：我们需要做一个类似于镜框的效果(多重边框)。在看到这个状态的时候，我们第一想法是通过border-image来到达效果。但显然，我们还有更好的方法。

box-shadow(盒阴影方法)：

我想大多人都用过box-shadow这个方法，这个CSS命令有4个参数，通过指定正值或负值，我们可以让投影面积增加或缩小。上述效果中的最后一层背景就是这样来完成的。

不过box-shadow还有一个好处，它支持逗号分隔语法，我们可以创建任意数量的投影。我们所需要注意的是，投影是从最内部开始的。那么，上述效果就很容易实现了：

box-shadow: 0px 0px 0px 10px #bbb,
            0 0 0 15px #222,
            0 2px 5px 15px rgba(0,0,0,.6);

不过这个有几点要注意下：

• 投影形式不是真实的边框（border）效果，所以不会收到box-sizing属性的影响。不过，我们可以通过内外边距来模拟出边框所需占据的空间；

• 因为不是边框，所以投影是在元素外的，不会影响到鼠标事件，如果要做鼠标放上去变化，那么就给它加一个inset属性；

outline(描边方法)：

如果您只需要两层外框，那么outline描边命令也是一个不错的选择。这种方法比第一种方法灵活，不像box-shadow方案只能模拟实线边框(虚线就不可用了)。如果你想得到上图那个效果，也可以这样来写：

border: 10px solid #bbb;
outline:5px solid #222;
box-shadow: 0px 2px 5px 3px rgba(0, 0, 0, 0.6);

描边的另外一个好处，你可以通过outline-offset属性来控制元素边缘之间的距离，这个属性还可以接受负值。我们可以做一些满好玩的效果：

当然，这个方法也有一些是需要注意的：

• outline描边并不接受逗号分离；

• 描边不会贴合border-radius属性产生圆角效果；

• CSS基本UI特效(第三版)规范所述：“描边可以不是矩形”。这个没测试过，有可能。