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>