一張圖教會CSS3倒影

分享

示例圖片

在CSS3以前，想要實現示例圖片這樣的一個倒影效果通常只能經過處理圖片的方式，而CSS3問世以後，想要實現這樣的效果變得很是簡單，只需一個CSS3屬性就能夠輕鬆實現了。

這就是今天所要提到的box-reflect屬性。

我們先看看W3C給出的box-reflect語法：

box-reflect：none | <direction> <offset>? <mask-box-image>? （?表明可缺省，也就是後倆屬性無關緊要）
<direction> = above | below | left | right （分別表明：上 | 下 | 左 | 右）
<offset> = <length> | <percentage>（分別表明：固定值 | 百分比）
<mask-box-image> = none | <url> | <linear-gradient> | <radial-gradient>| <repeating-linear-gradient> | <repeating-radial-gradient>（分別表明：沒有遮罩圖片 | 遮罩圖片路徑 | 線性漸變 | 徑向漸變 | 重複線性漸變 | 重複徑向漸變）
默認值：none

box-reflect可給兩種屬性值，一種是none，爲默認值，也就是沒有任何倒影效果，另外一種纔是咱們今天所要講的，它能夠同時賦予三個屬性值，它們依次表明倒影方向、元素與倒影之間的距離以及加在倒影上的遮罩圖像，其中後兩個屬性值能夠缺省，但若是<mask-box-image>存在，則<offset>必填。

說了那麼多幹巴巴的解釋，仍是聯繫一下示例應該更好理解些吧。

咱們如今來一步步地實現文章開頭示例圖片的投影效果：

①只給一個屬性值below。

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

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

實現效果：

②再加個5px的間距。

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

實現效果：

③最後加個圖片遮罩吧。

/*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屬性值，它就是用於線性漸變，具體用法這裏就不提了，能夠直接看這裏（http://www.w3cplus.com/content/css3-gradient )，寫得很詳細。

實現效果：

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

接下來，再說說徑向漸變建立圖片遮罩和直接使用圖片遮罩。

徑向漸變的話其實跟線性漸變相似，只須要你掌握CSS3中基本的徑向漸變方法，給個簡單示例吧：

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

實現效果：

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

那若是直接使用圖片遮罩呢？好比說我用這樣一張圖片做爲遮罩：

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

實現效果：

mask.png

能夠看出，遮罩圖片會徹底拉伸填充倒影圖片，而且效果是徹底透明部分不會顯示出來（其實CSS3漸變圖片遮罩原理也跟這個是同樣的）。

須要注意的是，以上講的全部效果不單單能夠用在圖片上，用在其餘元素上也是徹底能夠的，好比說文字。

兼容性： box-reflect雖然看起來效果很不錯，可是遺憾的是，目前只有webkit內核瀏覽器兼容，不過移動端基本已經沒有任何問題啦~~

學習過程當中遇到什麼問題或者想獲取學習資源的話，歡迎加入學習交流羣343599877，咱們一塊兒學前端！