用CSS3製作倒影的實現步驟

在實現一些效果的時候我們會用到倒影這個元素，這篇文章就給大家帶來最全的用CSS3製作倒影的實現步驟，下面就讓我們一起來看一下。

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

none：此值為box-reflect預設值，表示無倒影效果；

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

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

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

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

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

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

使用長度值來設定產生的倒影與原圖之間的間距，只要是CSS中的長度單位都可以，此值可以使用負值；

使用百分比來設定產生的倒影與原圖之間的間距，此值也可以使用負值

mask-box-image：用來設定倒影的遮罩效果，可以是背景圖片，也可以是漸層產生的背景映像。

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

Css3中的transform 漸層屬性怎麼使用

Css3製作動態開關的效果的實現步驟

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