目前僅在Chrome、Safari和Opera瀏覽器下支持

box-reflect：none | <direction> <offset>? <mask-box-image>?

由于此屬性并不是W3C標準屬性，在具體使用之時，還是需要添加瀏覽器的私有屬性，根據瀏覽器的兼容性，使用box-reflect時需要添加-webkit和前綴：

-webkit-box-reflect：none | <direction> <offset>? <mask-box-image>? box-reflect：none | <direction> <offset>? <mask-box-image>?

可惜的是在Firefox下并不支持這個屬性，不過值得慶幸的是，在Firefox下可以通過-moz-element()來模擬實現.

從box-reflect語法中可以得知，其主要包括以下幾個屬性值：

• none:此值為box-reflect默認值，表示無倒影效果；
• <direction>:此值表示box-reflect生成倒影的方向，主要包括以下幾個值：
  • above:表示生成的倒影在對象（原圖）的上方；
  • below:表示生成的倒影在對象（原圖）的下方；
  • left:表示生成的倒影在對象(原圖)的左側；
  • right:表示生成的倒影在對象(原圖)的右側；
• <offset>:用來設置生成倒影與對象（原圖）之間的間距，其取值可以是固定的像素值，也可以是百分比值，如：
  • :使用長度值來設置生成的倒影與原圖之間的間距，只要是CSS中的長度單位都可以，此值可以使用負值；
  • :使用百分比來設置生成的倒影與原圖之間的間距，此值也可以使用負值
• <mask-box-image>:用來設置倒影的遮罩效果，可以是背景圖片，也可以是漸變生成的背景圖像。

　　當對象(原圖)沒有足夠多的空間預留給生成的倒影放置的時候，將不會顯示出來。

　　第三個屬性<mask-box-image>給生成的倒影添加遮罩效果，我們可以通過兩種方式第一種是漸變生成的背景圖像，第二種是外部的背景圖像。

　　.box-reflect img {

　　-webkit-box-reflect: below 0 -webkit-linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,.0) 30%,rgba(250,250,250,0.3));

　　 box-reflect: below 0 -webkit-linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,.0) 30%,rgba(250,250,250,0.3));

　　}

　　只能使用線性漸變給生成的倒影添加遮罩效果，而徑向漸變到目前還無任何效果。另外有一點特別需要提醒大家，給生成的倒影添加遮罩效果的時候，如果沒有設置顯式的間距<offset>將會讓box-reflect失效。也就是說，當box-reflect屬性中的<mask-box-image>屬性值出現時，必須顯式的設置<offset>值，如果不需要間距，將其設置為0。

　　用于遮罩的圖片必須是png格式圖片。

.box-reflect img {-webkit-box-reflect: below 0 url(http://cdn.w3cplus.com/sites/default/files/blogs/2014/1405/css-masking.png);box-reflect: below 0 url(http://cdn.w3cplus.com/sites/default/files/blogs/2014/1405/css-masking.png); }

　　你將看到這樣的效果：

?

到目前為止，box-reflect屬性僅webkit內核的瀏覽器對其支持,在Firefox中有一個替代方案。那就是使用-moz-element()來替代

在圖片外面，我們有一個容器div，并且給他一個id名稱moz-reflect：

<div class="box-reflect" id="moz-reflect">

<img src="http://cdn.w3cplus.com/sites/default/files/blogs/2014/1405/box-reflect.jpg" alt="" height="200" /></div>

我們通過偽類:after來模擬：

.box-reflect { margin: 10px auto; width: 200px; } #moz-reflect:after { content: ""; display: block; background: -moz-element(#moz-reflect) no-repeat; width: auto; height: 200px; -moz-transform: scaleY(-1); }

模擬出來的效果如下：

?

轉載來自：http://www.w3cplus.com/css3/css3-box-reflect.html

?

轉載于:https://www.cnblogs.com/yuxingyoucan/p/6060856.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的CSS3中制作倒影box-reflect的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。