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

。。。。没看到效果。。

哦? 居然没有找到贴图的地方...

思路挺好的， 
不过这种方案最好建议是P图的方式，因为涉及到滤镜等这些特殊的样式时，在不同的浏览器上面实现比较麻烦，  
而且为了这一个DIV样式需要那么一大堆的CSS代码来控制，P图的话，一句话就搞定了

这只是一个简单的实例，但是当有动态文字的时候P图就有困难了...

该回复于2011-12-13 14:03:26被管理员删除

gg_mm_1 (gg_mm_1) 等　级：

#6楼 得分：0回复于：2011-12-13 14:05:19 看不懂，楼主还有css的资料

去这里看看...
http://download.csdn.net/tag/css%E8%B5%84%E6%96%99
http://download.csdn.net/

这也可以说是需求和实现之间的距离。有需求的用户就会觉得这个正好满足需求，很好。没需求的用户就没感觉了。

楼主发这样的帖子时，最好加上前缀“分享：……”，这样就比较容易区分帖子性质了。