纯CSS实现元素的镜框(多重边框)效果

 2016-09-24 14:38

刚才我们提到了元素的半透明边框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特效(第三版)规范所述:“描边可以不是矩形”。这个没测试过,有可能。

作者头像

作者:紫铜炉

自由博主,网页设计师。我关注科技产品和个人博客发展,注重用户体验和界面优化。

 发表评论: