css3实现漂亮的倒影效果

实际上还有很多CSS新属性并未包含进CSS3官方标准中。-webkit-box-reflect属性就是以谷歌浏览器为代表的Webkit渲染引擎独有的特征。-webkit-box-reflect的作用是让图片出现倒影。

如果一个图片，我们想要给其增加倒影，做法如下：

html：

<img src="data:images/7.jpg"/>

css样式：

img{
		 -webkit-box-reflect: below;
}

　　效果：

如果希望倒影和图片之间有空隙可是设置css样式：

img{
                 -webkit-box-reflect: below 10px;
                 }

效果如图：

实现渐变效果的css如下：

img{
                 -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.7)));
            }

效果如下：

但是，此方法只能适用于webkit内核的浏览器。要想可以兼容火狐浏览器，接下来，介绍另外一种方法。

html代码如下：

<div class="wrap">
            <div class="image"><img src="data:images/7.jpg" /></div>
            <div class="down"><!--放置倒影 -->
                <div class="reflection"></div> <!--放置倒影图片-->
                <div class="overlay"></div> <!--设置渐变-->
            </div>
        </div> 

css代码如下：

*{
        padding:0px;
        margin:0px;
    }
   .wrap{position:relative;}
   .image{margin-bottom:3px;}
   .down{position: relative;left:-11px;top:-10px;}
   .reflection{width:421px;height:180px;left:-10px;background:url(images/.jpg) bottom center no-repeat;
   -webkit-transform: scaleY(-);
   -moz-transform: scaleY(-);
   -ms-transform: scaleY(-);
   -o-transform: scaleY(-);
   transform: scaleY(-);
   opacity:0.5;
   filter:alpha(opacity='');
}
.overlay{position: relative;width:421px;height:180px;bottom:149px;
background-image: -moz-linear-gradient(center bottom, rgb(,,) %, rgba(,,,) %);
background-image: -o-linear-gradient(rgba(,,,) %, rgb(,,) %);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.20, rgb(,,)), color-stop(0.90, rgba(,,,)));
} 

transform：scaleY（-1）是的图片上下颠倒。

filter为过滤器，定义图片的可视效果，模糊与饱和度等。

background-image：-moz-linear-gradient，设置图片的渐变。
看着css代码多，其实并不是很难，很多都是加各种浏览器的前缀，解决兼容性问题。
效果图：