CSS3圖片倒影技術

目前爲止我們已經探討了很多CSS3中的新功能和新特徵。除了上面這些，實際上還有很多CSS新屬性並未包含進CSS3官方標準中，像谷歌瀏覽器或火狐瀏覽器等都會利用CSS的瀏覽器引擎前綴(Vendor Prefix)來實現很多自定義的CSS功能。-webkit-box-reflect屬性就是以谷歌瀏覽器爲代表的Webkit渲染引擎獨有的特徵。-webkit-box-reflect的作用是讓圖片出現倒影。

觀看演示

實現倒影的基本語法

實現倒影的基本語法非常的直觀，假設我們想給下面的圖片增加倒影效果，可以這樣寫：

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

上面這個例子中倒影出現了圖片的下方，但實際上我們也可以將倒影安置在左側、右側或上側。

倒影偏移量

Offset屬性值用來定義圖片和倒影影像之間的間距。參考下面的代碼：

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

上面的代碼中，我們使圖片和倒影影像之間相聚10px；

給倒影增加消隱效果

在現實生活中，倒影的出現通常是上半部比較清晰，下面半部逐漸消隱。爲了在CSS中實現這種效果，我們需要運用CSS3漸變色(Gradients)功能，就像下面這樣：

-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.1)));

這段代碼就能達到這樣的效果：

我們還可以使用color-stop來控制色彩過渡，讓倒影更加漂亮：

img {
	-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent) , to(rgba(250, 250, 250, 0.1)));
}

火狐瀏覽器中倒影的實現

目前只有Webkit瀏覽器(谷歌瀏覽器和Safari瀏覽器)實現box-reflect屬性。爲了在火狐瀏覽器中也實現倒影功能，我們需要尋找另外的途徑：使用-moz-element()方法。這個方法能夠複製指定網頁元素的內容。讓我們來看看下面的例子：

我們把圖片包裹着一個ID是someid的<div>裏。

並且，爲了存放倒影影像，我們將使用:before僞元素，就像下面：

#someid {
   position: relative;
   /* 給倒影留下空間 */
   margin-bottom: 120px;
}

#someid: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)) 0px 0px, 
               -moz-element(#someid) 0px -127px no-repeat;

   -moz-transform: scaleY(-1); /* flip the image vertically */
   position:relative;
   height:140px;
   width: 360px; /* 需要 > image width + margin + shadow */
   top: 247px;
   left:0px;
}

這裏的-moz-transform是一個負值，作用就是讓複製過來的圖形上下顛倒，達到倒影的效果。爲了讓:before僞元素跟原始圖形相配合，我們需要移動它的位置。這裏的背景偏移量 (-127px)是:before僞元素高(140px) – (圖片的高 (247px) + div的border (20px))。需要注意的是，火狐瀏覽器版的倒影實現只能用在頁面的背景是真實背景。背景色要和:before僞元素使用的漸變色的顏色一致。

因爲所有的屬性都是來實現倒影的，而且這些屬性都有火狐瀏覽器獨有的前綴，和Webkit的倒影不衝突，所以在代碼在可以把兩個版本倒影方法都寫上，保證兩種瀏覽器裏都有效果。

視頻倒影

官方文檔中說當倒影的實體內容變化時，倒影的內容也會相應更新。因此，這種技術用在視頻是有特殊的效果。

觀看演示

CSS倒影技術在火狐瀏覽器中的小問題

有時，火狐瀏覽器生成的漸變色圖形會比背景元素稍微小一些，導致有一些間隙線出現。爲了避免這種情況出現，在:before僞元素的頂部和底部加1px的padding，並且分別設置背景的裁剪方式和原點：

padding: 1px 0px;
background-origin: border-box, content-box;
background-clip: border-box, content-box;

CSS3REFLECT倒影