示例如下图所示：
页面代码如下：
<!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>倒影示例</title>
<style type="text/css">
/* ==============================================
Theme White
============================================== */
#gallery-white {
490px;
margin:50px auto 0px;
position:relative;
overflow:hidden;
background:#FFF;
padding:0px 50px;
border:1px solid #ccc;
}
#gallery-white h1 {
text-align:center;
font:20px Arial, Helvetica, sans-serif;
margin-bottom:50px;
}
#gallery-white h1 span {
font-size:12px;
}
#gallery-white .image-block {
78px;
margin:0px 10px;
float:left;
}
#gallery-white .reflection {
position:relative;
}
#gallery-white .reflection img {
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-ms-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
filter: flipv;
opacity:0.20;
filter: alpha(opacity='20');
}
#gallery-white .overlay {position:absolute; top:0px; left:0px; 78px; height:120px;
background-image: -moz-linear-gradient(center bottom, rgb(255,255,255) 60%, rgba(255,255,255,0) 75%);
background-image: -o-linear-gradient(rgba(255,255,255,0) 25%, rgb(255,255,255) 40%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.60, rgb(255,255,255)), color-stop(0.75, rgba(255,255,255,0)));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColor=0, EndColorStr=#ffffff);
}
#gallery-white .vline {
position:absolute;
bottom:70px;
border-bottom:2px solid #666;
490px;
}
/* ==============================================
Common styling for link
============================================== */
p {text-align:center; font-size:18px; font-family:Arial, Helvetica, sans-serif; padding-top:20px;}
a {color:#333; text-decoration:none;}
a:hover {text-decoration:underline;}
</style>
</head>
<body>
<div id="gallery-white">
<h1>CSS3 Reflection Demo <span>(Theme White)</span></h1>
<div class="image-block">
<img src="images/book1.jpg" alt="">
<div class="reflection">
<img src="images/book1.jpg" alt="">
<div class="overlay"></div>
</div>
</div>
<div class="image-block">
<img src="images/book2.jpg" alt="">
<div class="reflection">
<img src="images/book2.jpg" alt="">
<div class="overlay"></div>
</div>
</div>
<div class="image-block">
<img src="images/book3.jpg" alt="">
<div class="reflection">
<img src="images/book3.jpg" alt="">
<div class="overlay"></div>
</div>
</div>
<div class="image-block">
<img src="images/book4.jpg" alt="">
<div class="reflection">
<img src="images/book4.jpg" alt="">
<div class="overlay"></div>
</div>
</div>
<div class="image-block">
<img src="images/book5.jpg" alt="">
<div class="reflection">
<img src="images/book5.jpg" alt="">
<div class="overlay"></div>
</div>
</div>
<div class="vline"></div>
</div>
</body>
</html>