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

　　實現倒影的基本語法

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

　　img{

　　-webkit-box-reflect:below;

　　}

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

　　倒影偏移量

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

　　img{

　　-webkit-box-reflect:below10px;

　　}

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

　　給倒影增加消隱效果

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

　　-webkit-box-reflect:below0px-webkit-gradient(linear,lefttop,leftbottom,from(transparent),to(rgba(250,250,250,0.1)));

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

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

　　img{

　　-webkit-box-reflect:below0px-webkit-gradient(linear,lefttop,leftbottom,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:"";/*neededornothingwillbeshown*/

　　background:-moz-linear-gradient(top,white,white30%,rgba(255,255,255,0.9)65%,rgba(255,255,255,0.7))0px0px,

　　-moz-element(#someid)0px-127pxno-repeat;

　　-moz-transform:scaleY(-1);/*fliptheimagevertically*/

　　position:relative;

　　height:140px;

　　width:360px;/*需要>imagewidth+margin+shadow*/

　　top:247px;

　　left:0px;

　　}

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

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

　　視頻倒影

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

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

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

　　padding:1px0px;

　　background-origin:border-box,content-box;

　　background-clip:border-box,content-box;

　　以上就是關于扣丁學堂HTML5培訓之HTML5+CSS3圖片倒影技術實現及原理的詳細介紹，最后想要工作不累就要不斷的提升自己的技能，請關注扣丁學堂官網、微信等平臺，扣丁學堂IT職業在線學習教育平臺為您提供權威的HTML5視頻教程系統，通過千鋒扣丁學堂金牌講師在線錄制的第一套自適應HTML5在線視頻課程系統，讓你快速掌握HTML5從入門到精通開發實戰技能。扣丁學堂H5技術交流群：751662650。

*博客內容為網友個人發布，僅代表博主個人觀點，如有侵權請聯系工作人員刪除。