有一句話說的好：「橫看成嶺側成峰，遠近高低各不同」，有些時候，我們需要從不同的角度去欣賞mm，如下圖：
在早期，要實現這種效果，我們只能乖乖的找設計去製作，然後在頁面上插入一張，但是隨著css3的出現，我們可以純**實現，如何實現呢？就是通過css3的box-reflect屬性。
相容性
接下來，我們來了解box-reflect如何使用？
語法如下：
-webkit-box-reflect：none | ? ?
box-reflect:none | ? ?複製**
none：此值為預設值，表示無倒影；
direction：生成倒影的方向
above：指定倒影在物件的上邊 below：指定倒影在物件的下邊 left：指定倒影在物件的左邊 right：指定倒影在物件的右邊
offset：與倒影間隔
length：用長度值來定義倒影與物件之間的間隔。可以為負值percentage：用百分比來定義倒影與物件之間的間隔。可以為負值
mask-box-image：用來設定倒影的遮罩效果；
值可以是：
none：無遮罩影象url：使用絕對或相對位址指定遮罩影象。linear-gradient：使用線性漸變建立遮罩影象。radial-gradient：使用徑向(放射性)漸變建立遮罩影象。repeating-linear-gradient：使用重複的線性漸變建立背遮罩像。repeating-radial-gradient：使用重複的徑向(放射性)漸變建立遮罩影象。
光是紙上談兵可不行，我們還是要通過例項來看看效果。
倒影的方向
在這個例子中，我弄了三個img：
複製**css如下：
.box1,.box2,.box3
img
.box1 img
.box2 img,.box3 img
.box3複製**
在這裡有乙個疑問，box2和box3中的都設定了box-reflect:above，都是在頂部生成投影，為什麼box2看不到效果呢？原因就是我給box3設定了padding-top:200px，而box2沒有，初步估計是因為沒有空間讓其顯示生成的倒影。
倒影與物件之間的距離
.box1 img
.box2 img
.box3 img複製**
接下來我們學習最後乙個屬性。
遮罩效果
（1）使用漸變給倒影新增遮罩效果
.box1 img複製**使用背景圖給倒影新增遮罩效果
首先我們需要一張五角星的png：
.box2 img複製**到這裡，關於css3的box-reflect屬性的語法和使用已經介紹完了。
使用CSS3製作倒影
webkit box reflect仍然是乙個非標準屬性,目前僅在chrome safari和opera瀏覽器下支援,可惜的是在firefox下並不支援這個屬性，不過值得慶幸的是，在firefox下可以通過element svg的mask來模擬實現.webkit box reflect none k...
使用CSS3製作倒影 box reflect
此屬性並不是w3c標準屬性，在具體使用之時，還是需要新增瀏覽器的私有屬性，根據瀏覽器的相容性，使用box reflect時需要新增 webkit和字首 webkit box reflect none box reflect none 從box reflect語法中可以得知，其主要包括以下幾個屬性值 ...
CSS3中製作倒影box reflect
目前僅在chrome safari和opera瀏覽器下支援 box reflect none 由於此屬性並不是w3c標準屬性，在具體使用之時，還是需要新增瀏覽器的私有屬性，根據瀏覽器的相容性，使用box reflect時需要新增 webkit和字首 webkit box reflect none b...