CSS3倒影實(shí)例教程

box-reflect可給兩種屬性值，一種是none，為默認(rèn)值，也就是沒有任何倒影效果，另一種才是我們今天所要講的，它可以同時(shí)賦予三個(gè)屬性值，它們依次代表倒影方向、元素與倒影之間的距離以及加在倒影上的遮罩圖像，其中后兩個(gè)屬性值可以缺省，但如果<mask-box-image>存在，則<offset>必填。

說了那么多干巴巴的解釋，還是聯(lián)系一下示例應(yīng)該更好理解些吧。

我們現(xiàn)在來一步步地實(shí)現(xiàn)文章開頭示例圖片的投影效果：

①只給一個(gè)屬性值below。

<!--HTML代碼-->< img class="img" src="imgs/cat.jpg" />

/*CSS代碼*/.img{ -webkit-box-reflect: below; box-reflect: below;}

實(shí)現(xiàn)效果：

②再加個(gè)5px的間距。

/*CSS代碼*/.img{ -webkit-box-reflect: below 5px; box-reflect: below 5px;}

實(shí)現(xiàn)效果：

③最后加個(gè)圖片遮罩吧。

/*CSS代碼*/.img{ -webkit-box-reflect: below 5px -webkit-linear-gradient(transparent 60%,rgba(0,0,0,.3));box-reflect: below 5px linear-gradient(transparent 60%,rgba(0,0,0,.3));}

這里的圖片遮罩沒有用圖片，而是用了CSS3中的linear-gradient屬性值，它就是用于線性漸變，具體用法這里就不提了，可以直接看這里（ )，寫得很詳細(xì)。

實(shí)現(xiàn)效果：

這就是文章開頭示例圖片的最終效果。

接下來，再說說徑向漸變創(chuàng)建圖片遮罩和直接使用圖片遮罩。

徑向漸變的話其實(shí)跟線性漸變類似，只需要你掌握CSS3中基本的徑向漸變方法，給個(gè)簡單示例吧：

/*CSS代碼*/.img{ -webkit-box-reflect: left 0 -webkit-radial-gradient(#000 30%,transparent); box-reflect: left 0 radial-gradient(#000 30%,transparent);}

實(shí)現(xiàn)效果：

效果很棒！好像貓咪真的在照鏡子一樣~~

那如果直接使用圖片遮罩呢？比如說我用這樣一張圖片作為遮罩：

/*CSS代碼*/.img{ -webkit-box-reflect: right 0 url(imgs/mask.png); box-reflect: right 0 url(imgs/mask.png);}

實(shí)現(xiàn)效果：

可以看出，遮罩圖片會完全拉伸填充倒影圖片，并且效果是完全透明部分不會顯示出來（其實(shí)CSS3漸變圖片遮罩原理也跟這個(gè)是一樣的）。

需要注意的是，以上講的所有效果不僅僅可以用在圖片上，用在其他元素上也是完全可以的，比如說文字。

兼容性： box-reflect雖然看起來效果很不錯(cuò)，但是遺憾的是，目前只有webkit內(nèi)核瀏覽器兼容，不過移動(dòng)端基本已經(jīng)沒有任何問題啦~~

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com