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

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

由于此屬性并不是W3C標(biāo)準(zhǔn)屬性，在具體使用之時(shí)，還是需要添加瀏覽器的私有屬性，根據(jù)瀏覽器的兼容性，使用box-reflect時(shí)需要添加-webkit和前綴：

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

可惜的是在Firefox下并不支持這個(gè)屬性，不過(guò)值得慶幸的是，在Firefox下可以通過(guò)-moz-element()來(lái)模擬實(shí)現(xiàn).

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

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

　　當(dāng)對(duì)象(原圖)沒(méi)有足夠多的空間預(yù)留給生成的倒影放置的時(shí)候，將不會(huì)顯示出來(lái)。

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

　　.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));

　　}

　　只能使用線性漸變給生成的倒影添加遮罩效果，而徑向漸變到目前還無(wú)任何效果。另外有一點(diǎn)特別需要提醒大家，給生成的倒影添加遮罩效果的時(shí)候，如果沒(méi)有設(shè)置顯式的間距<offset>將會(huì)讓box-reflect失效。也就是說(shuō)，當(dāng)box-reflect屬性中的<mask-box-image>屬性值出現(xiàn)時(shí)，必須顯式的設(shè)置<offset>值，如果不需要間距，將其設(shè)置為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內(nèi)核的瀏覽器對(duì)其支持,在Firefox中有一個(gè)替代方案。那就是使用-moz-element()來(lái)替代

在圖片外面，我們有一個(gè)容器div，并且給他一個(gè)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>

我們通過(guò)偽類:after來(lái)模擬：

.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); }

模擬出來(lái)的效果如下：

?

轉(zhuǎn)載來(lái)自：http://www.w3cplus.com/css3/css3-box-reflect.html

?

轉(zhuǎn)載于:https://www.cnblogs.com/yuxingyoucan/p/6060856.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。