css3實現漂亮的倒影效果

     實際上還有很多CSS新屬性並未包含進CSS3官方標准中。-webkit-box-reflect屬性就是以谷歌瀏覽器為代表的Webkit渲染引擎獨有的特征。-webkit-box-reflect的作用是讓圖片出現倒影。

    如果一個圖片，我們想要給其增加倒影，做法如下：

   html：

<img src="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="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/7.jpg) bottom center no-repeat; 
   -webkit-transform: scaleY(-1); 
   -moz-transform: scaleY(-1); 
   -ms-transform: scaleY(-1); 
   -o-transform: scaleY(-1); 
   transform: scaleY(-1); 
   opacity:0.5; 
   filter:alpha(opacity='50'); 
} 
.overlay{position: relative;width:421px;height:180px;bottom:149px; 
background-image: -moz-linear-gradient(center bottom, rgb(255,255,255) 20%, rgba(255,255,255,0) 90%); 
background-image: -o-linear-gradient(rgba(255,255,255,0) 10%, rgb(255,255,255) 30%); 
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.20, rgb(255,255,255)), color-stop(0.90, rgba(255,255,255,0))); 
} 

transform：scaleY（-1）是的圖片上下顛倒。

filter為過濾器，定義圖片的可視效果，模糊與飽和度等。

background-image：-moz-linear-gradient，設置圖片的漸變。
看着css代碼多，其實並不是很難，很多都是加各種瀏覽器的前綴，解決兼容性問題。
效果圖：