CSS反射效果实现-优快云博客


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#wrapper{width:600px;margin:50px auto;border:1px solid #ccc;}

*{border:none;padding:0;margin:0;}

.reflectionBox{position:relative;_zoom:1;}

.reflectionBox:before{    
	content: url("http://xiu.56img.com/upload/mm/woxiudatu/92/65/1377252705_lulu180380646.jpg");
	display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 100%;
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
    width: 100%;
    z-index: 10;
}

.reflectionBox:after{    
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 100%;
    width: 100%;
    z-index: 100;
    background-image: -webkit-linear-gradient(-90deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8));
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8));

} 
.refImage,.refGradient{display:none;}
</style>
<!--[if lte IE 9 ]> 
<style>
.refImage{
	background: url("http://xiu.56img.com/upload/mm/woxiudatu/92/65/1377252705_lulu180380646.jpg") no-repeat;
	display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 100%;
    width: 100%;
    z-index: 10;
    _height:176px;
    _width:228px;

    filter: flipv;

}
.refGradient{
    display: block;
    height: 100%;

    left: 0;
    position: absolute;
    top: 100%;
    width: 100%;
    z-index: 100;
    _height:176px;
    _width:228px;
    filter: 
    	progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ee000000',GradientType=0 );

    -ms-filter: 
    	progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ee000000',GradientType=0 );
}
</style>
<![endif]-->

<script type="text/javascript">
</script>
</head>

<body>
	<div id="wrapper">
		<div id="test">abc</div>
		<div class="reflectionBox">
			<span class="refImage"></span><span class="refGradient"></span>
			<img class="pic" src="http://xiu.56img.com/upload/mm/woxiudatu/92/65/1377252705_lulu180380646.jpg" />
		</div>
	</div>
</body>
</html>
http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/cross-browser-css-reflections-glows-and-blurs/
http://msdn.microsoft.com/en-us/library/ms532997(VS.85,loband).aspx
图片倒影
