1.CSS3 倒影簡介
除了前文所提及的，CSS3還新增了Reflections板塊，即允許CSS3進行設計倒影，我們完全可以在不使用PS的情況下，通過代碼在WEB耑實現。但是， CSS3-reflections目前僅獲得webkit引擎的支持，我們只能在谷歌與Safari瀏覽器中使用。但是別灰心，在未來必然會適用於更多的主流瀏覽器。
2. CSS3 倒影語法
語法：
box-reflect：none | ?
none：此值爲box-reflect默認值，表示無倒影效果；
direction：此值表示box-reflect生成倒影的方向，主要包括以下幾個值：
above：表示生成的倒影在對象（原圖）的上方；
below：表示生成的倒影在對象（原圖）的下方；
left：表示生成的倒影在對象(原圖)的左側；
right：表示生成的倒影在對象(原圖)的右側；
offset：用來設置生成倒影與對象（原圖）之間的間距，其取值可以是固定的像素值，也可以是百分比值，如：
使用長度值來設置生成的倒影與原圖之間的間距，只要是CSS中的長度單位都可以，此值可以使用負值；
使用百分比來設置生成的倒影與原圖之間的間距，此值也可以使用負值
mask-box-image：用來設置倒影的遮罩效果，可以是背景圖片，也可以是漸變生成的背景圖像。
3. CSS3 倒影基本用法
3.1 圖片倒影：
下面的示例定義一個簡單的倒影樣式，倒影的位置我們可以根據實際情況來設置，此處倒影爲圖片下方。效果圖如下：
CSS:
img {
width:200px;
height: 200px;
-webkit-box-reflect:below;
}ps: 如果倒影在圖片上方，且沒有預留一定的空間，將無法看見。我們可以給父級設置一個pading-top值便可見。
爲倒影設置邊距：
邊距offset取值可以是長度值（px、em或rem），也可以是百分比，還可以是負值。
我們在上面的基礎上繼續改進，爲倒影設置距離，向下偏移10像素，效果圖如下：
改動的css代碼：
-webkit-box-reflect: below 10px;
可以給倒影設置方向和間距之外，還可以設置遮罩效果。一是添加倒影的漸變效果，（如果對CSS3漸變沒有了解的可以在公衆號中搜索關鍵字便有詳細介紹），二是遮罩層效果。
接下來繼續進行改進，設計CSS3漸變倒影，通過漸變遮罩逐漸蓋住下面的倒影，制作出漸隱效果。
3.2 漸變效果：
-webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));
3.3 遮罩層效果：
-webkit-box-reflect: below 0 url(2017.1.23-2.png);
ps: 用於遮罩的圖片必須是png格式圖片。給生成的倒影添加遮罩效果的時候，如果沒有設置顯式的間距offset將會讓box-reflect失效。也就是說，當box-reflect屬性中的mask-box-image屬性值出現時，必須顯式的設置offset值，如果不需要間距，將其設置爲0。
3.4 文字倒影
當然，我們除了可以通過圖片設置倒影，也可以爲網頁上的任何對象設置倒影，下面做個文字本倒影的例子。
代碼如下：
p {
font-size: 24px;
color: #39f;
-webkit-box-reflect: below 5px;
}以匠人之心 –碼出多彩程序人生與圖片倒影的初始情況相同，大家可以根據相關參數進行具體設置。
小結：
CSS3倒影並不僅僅局限於圖片及文本，網頁中的所有對象都可以設置，靈活運用漸變知識可以做出驚人的效果，但CSS3倒影屬性目前僅在webkit内核的瀏覽得到支持。希望本篇文章能給大家帶來幫助。
