在實現一些效果的時候我們會用到倒影這個元素,這篇文章就給大家帶來最全的用CSS3製作倒影的實現步驟,下面就讓我們一起來看一下。
box-reflect:none | <direction>
none:此值為box-reflect預設值,表示無倒影效果;
direction:此值表示box-reflect產生倒影的方向,主要包括以下幾個值:
above:表示產生的倒影在物件(原圖)的上方;
below:表示生成的倒影在物件(原圖)的下方;
left:表示生成的倒影在物件(原圖)的左邊;
right:表示生成的倒影在物件(原圖)的右邊;
offset:用來設定生成倒影與物件(原圖)之間的間距,其取值可以是固定的像素值,也可以是百分比值,如:
使用長度值來設定產生的倒影與原圖之間的間距,只要是CSS中的長度單位都可以,此值可以使用負值;
使用百分比來設定產生的倒影與原圖之間的間距,此值也可以使用負值
mask-box-image:用來設定倒影的遮罩效果,可以是背景圖片#,也可以是漸層產生的背景圖片。
相信看了這些案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
相關閱讀:
以上是用CSS3製作倒影的實作步驟的詳細內容。更多資訊請關注PHP中文網其他相關文章!