网页多边框效果:CSS3中的box

多边框效果，大家常见的应该是双线边框效果，使用页面部分元素具有层次的效果。在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等，我们将在近期整理有关于制作多边框效果的各种方法，感兴趣的同学可以观注本站的相关更新。

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索背景图片
， 元素
， 边框
， 效果
， 一个
， 双线
多元素
，以便于您获取更多的相关知识。