web 页面中倒影制作的一种方法

在web中需要制作图片的倒影效果的文件比较多，但要制作整个div 块的倒影介绍却很少，在网上也很少有相关资料，先把拙见介绍一下，共同学习改进。  

步骤：  
1，在页面中正常实现div 内容；  
2，增加一个相同的div内容, 采用绝对位置，放置在原div的下方；  
3，添加一个渐变的透明蒙板，大小位置与第二个div相同；  
4, 采用css设置第二个div的显示特性和蒙板的特性。  

实例： 
web 片段：  

//原始div段  
<div class="product_1" style="z-index: 2;background: white; cursor: pointer;" i="25"><img class="image_1_small_25" i="25" src="http://img03.taobaocdn.com/bao/uploaded/i3/T1XumvXfVKXXb0RUoY_031044.jpg_310x310.jpg" style="margin-top: 5px; margin-right: 105px; margin-bottom: 5px; margin-left: 105px; width: 390px; height: 390px; "></div>  

//倒影div段  
<div class="product_reflect_1" style="z-index: 2;background: white;"><img class="image_1_small_25" i="25" src="http://img03.taobaocdn.com/bao/uploaded/i3/T1XumvXfVKXXb0RUoY_031044.jpg_310x310.jpg" style="margin-top: 5px; margin-right: 105px; margin-bottom: 5px; margin-left: 105px; width: 390px; height: 390px; "></div>  

//蒙板  
<div id="gproduct_reflect_b_25" class="product_reflect_1" style="z-index: 3;background: url(/images/product_reflect_1.png) repeat-x;"><div></div></div>  


CSS:  

.product_reflect_1 {  
display: block;  
position: absolute;  
width: 600px;  
height: 400px;  
top: 405px;  
left: 0;  
z-index: 1;  
background: white;  
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5);  
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5);  
-o-box-shadow: 0 1px 2px rgba(0,0,0,0.5);  
-ms-box-shadow: 0 1px 2px rgba(0,0,0,0.5);  
box-shadow: 0 1px 2px rgba(0,0,0,0.5);  
-webkit-transform: matrix(1,0,0,-1,0,0);  
-moz-transform: matrix(1,0,0,-1,0,0);  
-o-transform: matrix(1,0,0,-1,0,0);  
-ms-transform: matrix(1,0,0,-1,0,0);  
transform: matrix(1,0,0,-1,0,0);  
filter: flipv alpha(opacity=25,finishopacity=0,style=1,starty=0,finishy=400,startx=0,finishx=0);  
}  
.product_1 {  
position: absolute;  
width: 600px;  
height: 400px;  
top: 0;  
left: 0;  
z-index: 1;  
background: white;  
display: block;  
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5);  
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5);  
-o-box-shadow: 0 1px 2px rgba(0,0,0,0.5);  
-ms-box-shadow: 0 1px 2px rgba(0,0,0,0.5);  
box-shadow: 0 1px 2px rgba(0,0,0,0.5);  
}  

效果参见：  
http://www.giisoo.com/?v=x&t=shop&s=420&q=%E6%A3%89%E8%A1%A3&a=s&n=30&ps=2&v=1&di=-1