CSS3做出倒影的圖文詳解

這次帶給大家CSS3做出倒影的圖文詳解，CSS3做出倒影效果的注意事項有哪些，下面就是實戰案例，一起來看一下。

效果圖如下：

#圖片

# #在CSS3之前，想要實現範例圖片這樣的一個倒影效果一般只能透過處理圖片的方式，而CSS3問世之後，想要實現這樣的效果變得非常簡單，只需一個CSS3

屬性

就可以輕鬆實現了。

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

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

• box-reflect：none | <

  direction> < offset>? ? （?代表可缺省，也就是後倆屬性可有可無）

• = above | below | left |

  right

  （分別代表：上| 下| 左| 右）

• = | （分別代表：固定值| 百分比）

• = none | | | | | | < repeating-linear-gradient> | （分別代表：沒有遮罩圖片| 遮罩圖片路徑| 線性漸變| 徑向漸變| 重複線性漸變| 重複徑向漸層）

##預設值：none

box-reflect可給兩種屬性值，一種是none，為預設值，也就是沒有任何倒影效果，另一種才是我們今天所要講的，它可以同時賦予三個屬性值，它們依次代表倒影方向、元素與倒影之間的距離以及加在倒影上的遮罩圖像，其中後兩個屬性值可以缺省，但如果存在，則必填。 說了那麼多乾巴巴的解釋，還是聯絡一下範例應該更能理解一點吧。

我們現在來一步步實現文章開頭範例圖片的投影效果：

①只給一個屬性值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.jb51.net/css/369475.html)，寫得很詳細。
實現效果：###############這就是文章開頭範例圖片的最終效果。 ######接下來，再說說徑向漸層創建圖片遮罩和直接使用圖片遮罩。 ######徑向漸變的話其實跟線性漸變類似，只需要你掌握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核心瀏覽器相容，不過行動端基本上已經沒有任何問題啦~~

#相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

CSS3做出條紋大背景

css3文字漸層動畫

以上是CSS3做出倒影的圖文詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！