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

补充，该方法可以跨浏览器

仔细拜读了下，不是很明白，不过看了网页的效果还不错。站内信联系

原理是IE浏览器中使用flipv滤镜。不是IE且支持CSS3的浏览器使用CSS3的transform。


不知道不支持CSS3而且不是IE的浏览器会怎么样？

如果我实现，也是楼主的思路。非IE浏览器的新版好像都支持css3的这个属性吧！没试过