css3图片倒影效果 

 1 <html lang="zh-CN">
 2 <head>
 3 <title></title>
 4     <meta charset="UTF-8">
 5     <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
 6     <style type="text/css">
 7     body{
 8         height: 1000px;
 9     }
10 img {
11     -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent) , to(rgba(250, 250, 250, 0.5)));
12 }
13 
14 /**兼容谷歌浏览器**/
15 #someid {
16    position: relative;
17    /* 给倒影留下空间 */
18    margin-bottom: 120px;
19 }
20 
21 #someid:before {
22    content:""; /* needed or nothing will be shown */
23 
24    background: -moz-linear-gradient(top, white, white 30%, rgba(255,255,255,0.9) 65%, rgba(255,255,255,0.7)) 0px 0px, 
25                -moz-element(#someid) 0px -127px no-repeat;
26 
27    -moz-transform: scaleY(-1); /* flip the image vertically */
28    position:relative;
29    height:140px;
30    width: 360px; /* 需要 > image width + margin + shadow */
31    top: 247px;
32    left:0px;
33 }
34     </style>
35 </head>
36 <body>
37 <div id="someid">
38     <img src="images/1.png"/>
39 </div>
40 </body>
41 </html>

新知识：

-webkit-box-reflect实现倒影
-webkit-gradient实现渐变
posted @ 2014-10-23 00:43  韵脚学员  阅读(189)  评论(0)    收藏  举报