CSS3图片倒影效果

效果图：

倒影消隐效果：CSS3渐变色(Gradients)功能，

倒影偏移量：-webkit-box-reflect: below 10px;

CSS:

#imgbox { 

       -webkit-box-reflect: below 0px -webkit-linear-gradient(bottom, rgba(255,255,255,0.3) 0%, transparent 40%, transparent 100%); 

       padding: 0px 10px; 

       position:relative; 

}  

#imgbox img { 

       z-index: -1; 

       height:340px; 

       width:340px; 

} 

#imgbox:before { 

       content:""; 

       background: -moz-linear-gradient(top, white, white 30%, rgba(255,255,255,0.9) 65%, rgba(255,255,255,0.7)) 0px 0px,-moz-element(#imgbox) 0px 0px no-repeat; 

       /*百分比为调倒影的透明度*/ 

       -moz-transform: scaleY(-1); 

       padding: 1px 0px; 

       background-origin: padding-box, content-box; 

       background-clip: padding-box, content-box; 

       position:absolute; 

       height:340px; 

       width: 340px; 

       top: 340px; 

       left:0px; 

}  

Html:

<div id="imgbox">  

       <img src="style/newimg/earth.png" alt="" /> 

</div>