css3设置图片倒影代码 支持chrome和firefox
下面是使用css代码来设置图片倒影的，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3设置图片倒影方法</title>
<style type="text/css">
/**-webkit-gradient:-运用CSS3渐变色(Gradients)功能给倒影增加消隐效果**/
.pic{
background: url('http://img0.bdstatic.com/img/image/shouye/bzhczw-9567323286.jpg');
width: 211px;
height: 288px;
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent),color-stop(30%, transparent), to(rgba(250, 250, 250, 0.3)));
margin: 0 0 300px 0 ;
}
#eml{
position: relative;
/* 给倒影留下空间 */
margin-bottom: 211px;
}
#eml:before {
content:""; /* needed or nothing will be shown */
background: -moz-linear-gradient(top, white, white 30%, rgba(255,255,255,0.9) 65%, rgba(255,255,255,0.7)),-moz-element(#eml)bottom left no-repeat;
-moz-transform: scaleY(-1);
/* flip the image vertically */
position: absolute;
height:288px;
width: 211px;
top: 288px;
left:0px;
}
</style>
</head>
<body>
<div class="pic">
</div>
<div id="eml" style="width: 211px;height: 288px;">
<img src="http://img0.bdstatic.com/img/image/shouye/bzhczw-9567323286.jpg" width="211px" height="288px"></img>
</div>
</html>
效果图：
来源：//作者：/更新时间：2014-05-31
顶
踩
相关文章：
