<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3在线实现图片阴影效果</title>
<style>
body {
font-family: Helvetica Neue, Arial, Helvetica, Geneva, sans-serif;
font-size: 13px;
margin: 0px;
}
ul.box {
width:980px;
height:auto;
margin: 20px auto;
padding: 0;
clear: both;
overflow: hidden;
}
ul.box li {
list-style-type: none;
margin:20px 10px;
padding: 0;
width: 300px;
height: 220px;
border: 2px solid #efefef;
position: relative;
float: left;
background: #ffffff; /* old browsers */
line-height:220px;
font-size:32px;
text-align:center;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset;
-o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset;
behavior: url(ie-css3.htc);
}
ul.box li:before {
z-index: -2;
position: absolute;
background: transparent;
width: 90%;
height: 80%;
content: '';
left: 20px;
bottom:8px;
-webkit-transform: skew(-12deg) rotate(-4deg);
-moz-transform:skew(-12deg) rotate(-4deg);
-o-transform: skew(-12deg) rotate(-4deg);
-ms-transform: skew(-12deg) rotate(-4deg);
-webkit-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
-o-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
behavior: url(ie-css3.htc);
}
ul.box li:after {
z-index: -1;
position: absolute;
background: transparent;
width: 90%;
height: 80%;
content: '';
right:20px;
bottom:8px;
-webkit-transform: skew(12deg) rotate(4deg);
-moz-transform:skew(12deg) rotate(4deg);
-o-transform: skew(12deg) rotate(4deg);
-ms-transform: skew(12deg) rotate(4deg);
-webkit-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
-o-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
behavior: url(ie-css3.htc);
}
.box li img {
width:290px;
height:210px;
padding:5px;
}
</style>
</head>
<body>
<ul class="box">
<div class="paper">
<li><img src="images/photo1.jpg"/></li>
</div>
<div class="paper">
<li><img src="images/photo2.jpg"/></li>
</div>
<div class="paper">
<li><img src="images/photo3.jpg"/></li>
</div>
<div class="paper">
<li>paper1</li>
</div>
<div class="paper">
<li>paper2</li>
</div>
<div class="paper">
<li>paper3</li>
</div>
</ul>
</body>
</html>
