box-shadow制作多边框效果

多边框效果，大家常见的应该是双线边框效果，使用页面部分元素具有层次的效果。在CSS2中依靠的是背景图片或者借助相邻两个元素的border来实现。而现在CSS3中的box-shadow可以直接在一个元素中完成，我们来看一个简单的片段：

<!-- HTML -->
<div id="box"></div>

<!-- CSS -- >
body {
  background: #39275B;
}
#box {
  width: 100px;
  height: 100px;
  margin: 50px auto;
  border: 1px solid #1E1530;
  box-shadow:-1px 0 0px #4E3A73,1px 0 0 #4e3a73,0 1px 0 #4e3a73,0 -1px 0 #4e3a73;
}

效果如下：

制作这种效果方法还有很多，同时box-shadow制作多边框的运用与还有其他的，我们再来看一个

#box {
    width: 200px;
    height: 150px;
    margin: 50px auto;
    box-shadow:
    0 0 0 2px #000,
    0 0 0 3px #999,
    0 0 0 9px #fa0,
    0 0 0 10px #666,
    0 0 0 16px #fd0,
    0 0 0 18px #000;
}

上面完全是通过box-shadow制作了一个六色边框效果的案例：

使用这种方法是不是很方便呀，这仅是box-shadow实现多边框的方法，我们还可以使用别的CSS3属性来实现，比如说border-color、::before等，我们将在近期整理有关于制作多边框效果的各种方法，感兴趣的同学可以观注本站的相关更新。

如需转载烦请注明出处：http://www.w3cplus.com/codes/css3-multiple-borders.html