武林网(www.vevb.com)文章简介：大家常见的应该是双线边框效果，使用页面部分元素具有层次的效果。在CSS2中依靠的是背景图片或者借助相邻两个元素的border来实现。而现在CSS3中的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等，我们将在近期整理有关于制作多边框效果的各种方法，感兴趣的同学可以观注本站的相关更新。
新闻热点
疑难解答
