用CSS3制作倒影的實(shí)現(xiàn)步驟

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

none：此值為box-reflect默認(rèn)值，表示無倒影效果；

direction：此值表示box-reflect生成倒影的方向，主要包括以下幾個(gè)值：

above：表示生成的倒影在對象（原圖）的上方；

below：表示生成的倒影在對象（原圖）的下方；

left：表示生成的倒影在對象(原圖)的左側(cè)；

right：表示生成的倒影在對象(原圖)的右側(cè)；

offset：用來設(shè)置生成倒影與對象（原圖）之間的間距，其取值可以是固定的像素值，也可以是百分比值，如：

使用長度值來設(shè)置生成的倒影與原圖之間的間距，只要是CSS中的長度單位都可以，此值可以使用負(fù)值；

使用百分比來設(shè)置生成的倒影與原圖之間的間距，此值也可以使用負(fù)值

mask-box-image：用來設(shè)置倒影的遮罩效果，可以是背景圖片，也可以是漸變生成的背景圖像。

相信看了這些案例你已經(jīng)掌握了方法，更多精彩請關(guān)注Gxl網(wǎng)其它相關(guān)文章！

相關(guān)閱讀：

Css3中的transform 漸變屬性怎么使用

Css3制作動態(tài)開關(guān)的效果的實(shí)現(xiàn)步驟

如何用CSS3屬性選擇器替代JS的作用

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com