请问我的图片为啥边框下移了
来源：2-1 翘边阴影
梅影西风
2016-04-22 21:09
<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>
写回答
关注
2回答
-
- qq_诺L一世相伴_0
- 2016-04-23 00:11:25
在 HTML 中，<img> 标签没有结束标签。
-
- 梅影西风
- 2016-04-22 21:57:59
知道了 <img src="E:\css\源码\images\photo1.jpg"><img/> 应该写为<img src="E:\css\源码\images\photo1.jpg"/>
CSS3实现“图片阴影”效果
利用多投影重叠的原理，实现曲线阴影与翘边阴影的效果
34769 学习 · 62 问题
相似问题