                        课程
                    
                        /前端开发
                        
                            /CSS3
                        
                        /CSS3实现“图片阴影”效果

请问我的图片为啥边框下移了

<html>
 <head>
 <title>
   CSS3
 </title>
  <style type="text/css">
  	body{
  		font-family:Arial;
  		font-size:20px
  		}
  	body{
  		margin:0;
  		padding:0;
  		list-style:none
  		}
  	.wrap{
  		width:70%;
  		height:200px;
  		margin:100px auto;
  		text-align:center;
  		background:#fff;
  		}
  		h1{
  		line-height:200px;	
  			}
  	.effect{
  		position:relative;
  		box-shadow:0 2px 3px 1px rgba(0,0,0,0.3),0px 0px 40px rgba(0,0,0,0.1) inset;
  		-webkit-box-shadow:0 2px 3px 1px rgba(0,0,0,0.3),0px 0px 40px rgba(0,0,0,0.1) inset;
  		-moz-box-shadow:0 2px 3px 1px rgba(0,0,0,0.3),0px 0px 40px rgba(0,0,0,0.1) inset;
  		-o-box-shadow:0 2px 3px 1px rgba(0,0,0,0.3),0px 0px 40px rgba(0,0,0,0.1) inset;
  		}
  	.effect:after,.effect:before{
  		position:absolute;
  		content:'';
  		top:50%;
  		left:10px;
  		right:10px;
  		bottom:0;
  		background:#fff;
  		z-index:-1;
  		box-shadow:0 0 20px 1px rgba(0,0,0,0.3);
  		-webkit-box-shadow:0 0 20px 1px rgba(0,0,0,0.3);
  		-moz-box-shadow:0 0 20px 1px rgba(0,0,0,0.3);
  		-o-box-shadow:0 0 20px 1px rgba(0,0,0,0.3); 
  		border-radius:100px/10px;
  		}
  	ul,li{list-style:none;
      margin:0;
      padding:0;}
  	.box{
  		width:980px;
  		height:auto;
  		clear:both;
  		overflow:hidden;
  		margin:20px auto;
  	}	
  	.box li{
  		width:300px;
  		height:210px;
  		float:left;
  		margin:20px 10px;
  		border:1px solid #110;
  		}
  	.box li img{
      display:block;
  		width:290px;
  		height:200px;
  		margin:5px;
  		}
  </style>
</head>
 <body>
  <div class="wrap effect">
	  <h1>Shadow Effect</h1>
  </div>
  <ul class="box">
  	<li><img src="E:\css\源码\images\photo1.jpg"><img/></li>
  	<li><img src="E:\css\源码\images\photo2.jpg"><img/></li>
  	<li><img src="E:\css\源码\images\photo3.jpg"><img/></li>
  </ul>
 </body>
</html>