在css3中我们知道可以使用box-shadow属性轻松的为元素添加阴影效果，并且可以设置多组效果，每组参数值用逗号隔开。如果把box-shadow特性的两个偏移量 h-shadow 、v-shadow设置为0，将模糊值blur也设置为0，此时增加扩张半径，就会使元素的投影变为实线边框。这样就可以模拟多边框效果了，首先看下box-shadow语法和参数。

http://www.runoob.com/cssref/css3-pr-box-shadow.html

box-shadow语法： 

box-shadow: h-shadow v-shadow blur spread color inset;

参数说明：

• x-shadow：设置对象的阴影水平偏移值，单位可以是px、em或百分比等，允许负值。{正值阴影在右边，负值阴影在左边，0的时候阴影中盒子后面，看不见的，如果有blur-radius值会有模糊效果。}
• y-shadow：设置对象的阴影垂直偏移值，单位可以是px、em或百分比等，允许负值。{同上}
• blur：用于设置边框阴影半径大小。
• spread：扩展半径，设置阴影的尺寸；这个参数可选，缺省时值为0。
• color：设置阴影的颜色；
• inset：这个参数默认不设置。默认情况下为外阴影，inset表示内阴影。

box-shadow实现多边框：

代码：

			div{
				width: 10%;
				height: 100px;
				background: coral;
				margin: 50px;
				text-align: center;
				float: left;
				font-size: 12px;
			}
			#d1{
				/*语法box-shadow：x-shadow水平偏移值  y-shadow垂直偏移值  blur阴影半径  spread扩展半径  color颜色  inset内阴影;*/
				 /*rgba(0,0,0,.1)灰色*/
				box-shadow: 0 0 0 10px rgba(0,0,0,.1),
				            0 0 0 16px yellow,
				            0 2px 5px 16px cyan;
			}


     <div id="d1"></div>

内阴影的使用:

代码：

	      #d2{
				box-shadow: 2px 2px 8px black inset;
			}
			
			#d3{
				box-shadow: -2px -2px 8px black inset;
			}

说明：使用insert的时候offset-x,offset-y的值的意义和外阴影是相反的，正值是左边，上边。负值是右边，下边。

 

外阴影的使用：

/*外部阴影*/
			#d4{
				box-shadow: 2px 2px 18px black ;
			}

spread-radius阴影扩大缩小的作用：

 /*把阴影的大小向外扩大了，左边和上边也出现了明显的阴影效果。*/
            #d5{
                box-shadow: 4px 4px 8px 6px black ;
            }

使用rgba等有透明效果的阴影：

#d6{
		box-shadow: 4px 4px 8px 6px rgba(0,0,0,.5 ) ;
	}

   阴影效果会跟随元素的圆角也会显示圆角的阴影。并且外阴影效果会和外阴影合并，内阴影效果会和内阴影合并，外阴影效果不会和内阴影效果不会合并。

#d7{
				 border-radius:8px;
                 box-shadow: 4px 4px 8px rgba(0,0,0,0.5),
                             4px 5px 3px #05A623,
                             inset 4px 4px 8px #000;
	}

box-shadow单边阴影实现：

 也是要借助spread-radius参数来实现

源代码：

        #d8{
				/*box-shadow: 0 0 8px 6px rgba(0,0,0,.8 ) ;*/
				 box-shadow: 8px 2px 2px -4px rgba(0,0,0,0.8);
			}
			#d9{
				 box-shadow: 2px 8px 2px -4px rgba(0,0,0,0.8);
			}
			#d10{
			
				 box-shadow: 2px -8px 2px -4px rgba(0,0,0,0.8);
			}
			#d11{
		
				 box-shadow: -8px 2px 2px -4px rgba(0,0,0,0.8);
			}
			
			#d12{
				 box-shadow: 0 0 2px 4px rgba(0,0,0,0.8);
			}