box-shadow 边框阴影小结

先上效果图：

<div class="drop-shadow"></div>

.drop-shadow {
		    width: 300px;
		    height: 150px;
		    position: relative;
		    background: #ccc; 
		  	margin: 100px auto;   
		  	border-radius: 5px;    
		  }
		
		  .drop-shadow:before,
		  .drop-shadow:after {
		    content: "";
		    position: absolute;
		    z-index: -1;
		    bottom: 13px;
		    left: 10px;
		    width: 50%;
		    max-width: 150px;
		    height: 20%;
		    -webkit-box-shadow: 0 15px 10px rgba(125,125,125,0.8);
		    	-moz-box-shadow: 0 15px 10px rgba(125,125,125,0.8);
		    		box-shadow: 0 15px 10px rgba(125,125,125,0.8);
		    -webkit-transform: rotate(-3deg);
		    	-moz-transform: rotate(-3deg);
		    		-o-transform: rotate(-3deg);
		    			transform: rotate(-3deg);
		  }
		
		 .drop-shadow:after {
		    right:10px;
		    left: auto;
		    -webkit-transform:rotate(3deg);
		    	-moz-transform:rotate(3deg);
		    		-o-transform:rotate(3deg);
		    			transform:rotate(3deg);
		 }