                        課程
                    
                        /前端開發
                        
                            /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>