前言
本文主要給大家介紹了關(guān)于CSS3倒影實(shí)現(xiàn)的相關(guān)內(nèi)容，分享出來(lái)供大家參考學(xué)習(xí)，下面話不多說(shuō)了，來(lái)一起看看詳細(xì)的介紹吧。
效果圖如下：
示例圖片
在CSS3之前，想要實(shí)現(xiàn)示例圖片這樣的一個(gè)倒影效果一般只能通過(guò)處理圖片的方式，而CSS3問(wèn)世之后，想要實(shí)現(xiàn)這樣的效果變得非常簡(jiǎn)單，只需一個(gè)CSS3屬性就可以輕松實(shí)現(xiàn)了。
這就是今天所要提到的box-reflect屬性。
咱們先看看W3C給出的box-reflect語(yǔ)法：
- box-reflect：none | <direction> <offset>? <mask-box-image>? （?代表可缺省，也就是后倆屬性可有可無(wú)）
- <direction>= above | below | left | right （分別代表：上 | 下 | 左 | 右）
- <offset>= <length> | <percentage>（分別代表：固定值 | 百分比）
- <mask-box-image>= none | <url> | <linear-gradient> | <radial-gradient>| <repeating-linear-gradient> | <repeating-radial-gradient>（分別代表：沒(méi)有遮罩圖片 | 遮罩圖片路徑 | 線性漸變 | 徑向漸變 | 重復(fù)線性漸變 | 重復(fù)徑向漸變）
- 默認(rèn)值：none
box-reflect可給兩種屬性值，一種是none，為默認(rèn)值，也就是沒(méi)有任何倒影效果，另一種才是我們今天所要講的，它可以同時(shí)賦予三個(gè)屬性值，它們依次代表倒影方向、元素與倒影之間的距離以及加在倒影上的遮罩圖像，其中后兩個(gè)屬性值可以缺省，但如果<mask-box-image>存在，則<offset>必填。
說(shuō)了那么多干巴巴的解釋?zhuān)€是聯(lián)系一下示例應(yīng)該更好理解些吧。
我們現(xiàn)在來(lái)一步步地實(shí)現(xiàn)文章開(kāi)頭示例圖片的投影效果：
①只給一個(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));}
這里的圖片遮罩沒(méi)有用圖片，而是用了CSS3中的linear-gradient屬性值，它就是用于線性漸變，具體用法這里就不提了，可以直接看這里（http://www.jb51.net/css/369475.html)，寫(xiě)得很詳細(xì)。
實(shí)現(xiàn)效果：
這就是文章開(kāi)頭示例圖片的最終效果。
接下來(lái)，再說(shuō)說(shuō)徑向漸變創(chuàng)建圖片遮罩和直接使用圖片遮罩。
徑向漸變的話其實(shí)跟線性漸變類(lèi)似，只需要你掌握CSS3中基本的徑向漸變方法，給個(gè)簡(jiǎn)單示例吧：
/*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)效果：
效果很棒！好像貓咪真的在照鏡子一樣~~
那如果直接使用圖片遮罩呢？比如說(shuō)我用這樣一張圖片作為遮罩：
/*CSS代碼*/
.img{ -webkit-box-reflect: right 0 url(imgs/mask.png); box-reflect: right 0 url(imgs/mask.png);}
實(shí)現(xiàn)效果：
mask.png
可以看出，遮罩圖片會(huì)完全拉伸填充倒影圖片，并且效果是完全透明部分不會(huì)顯示出來(lái)（其實(shí)CSS3漸變圖片遮罩原理也跟這個(gè)是一樣的）。
需要注意的是：以上講的所有效果不僅僅可以用在圖片上，用在其他元素上也是完全可以的，比如說(shuō)文字。
兼容性：box-reflect雖然看起來(lái)效果很不錯(cuò)，但是遺憾的是，目前只有webkit內(nèi)核瀏覽器兼容，不過(guò)移動(dòng)端基本已經(jīng)沒(méi)有任何問(wèn)題啦~~
總結(jié)