目前僅在chrome、safari和opera瀏覽器下支援
box-reflect：none | ? ?
box-reflect時需要新增-webkit和字首：
-webkit-box-reflect：none | ? ?
box-reflect：none | ? ?
-moz-element()來模擬實現.
從box-reflect語法中可以得知，其主要包括以下幾個屬性值：
:用來設定生成倒影與物件（原圖）之間的間距，其取值可以是固定的畫素值，也可以是百分比值，如：
:用來設定倒影的遮罩效果，可以是背景，也可以是漸變生成的背景影象。
當物件(原圖)沒有足夠多的空間預留給生成的倒影放置的時候，將不會顯示出來。
第三個屬性給生成的倒影新增遮罩效果，我們可以通過兩種方式第一種是漸變生成的背景影象，第二種是外部的背景影象。
.box-reflect img
只能使用線性漸變給生成的倒影新增遮罩效果，而徑向漸變到目前還無任何效果。另外有一點特別需要提醒大家，給生成的倒影新增遮罩效果的時候，如果沒有設定顯式的間距將會讓box-reflect失效。也就是說，當box-reflect屬性中的屬性值出現時，必須顯式的設定值，如果不需要間距，將其設定為0。
用於遮罩的必須是png格式。
.box-reflect img你將看到這樣的效果：
到目前為止，box-reflect屬性僅webkit核心的瀏覽器對其支援,在firefox中有乙個替代方案。那就是使用-moz-element()來替代
模擬出來的效果如下：div>來模擬：我們通過偽類:after
.box-reflect #moz-reflect:after
**來自：
使用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）
有一句話說的好 橫看成嶺側成峰，遠近高低各不同 有些時候，我們需要從不同的角度去欣賞mm，如下圖 在早期，要實現這種效果，我們只能乖乖的找設計去製作，然後在頁面上插入一張，但是隨著css3的出現，我們可以純 實現，如何實現呢？就是通過css3的box reflect屬性。相容性 接下來，我們來了解b...