用CSS3製作倒影的實作步驟
- php中世界最好的语言原創
- 2017-12-01 14:38:371583瀏覽
在實現一些效果的時候我們會用到倒影這個元素，這篇文章就給大家帶來最全的用CSS3製作倒影的實現步驟，下面就讓我們一起來看一下。
box-reflect：none | <direction>
none：此值為box-reflect預設值，表示無倒影效果；
direction：此值表示box-reflect產生倒影的方向，主要包括以下幾個值：
above：表示產生的倒影在物件（原圖）的上方；
below：表示生成的倒影在物件（原圖）的下方；
left：表示生成的倒影在物件(原圖)的左邊；
right：表示生成的倒影在物件(原圖)的右邊；
offset：用來設定生成倒影與物件（原圖）之間的間距，其取值可以是固定的像素值，也可以是百分比值，如：
使用長度值來設定產生的倒影與原圖之間的間距，只要是CSS中的長度單位都可以，此值可以使用負值；
使用百分比來設定產生的倒影與原圖之間的間距，此值也可以使用負值
mask-box-image：用來設定倒影的遮罩效果，可以是背景圖片#，也可以是漸層產生的背景圖片。
相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
相關閱讀：
以上是用CSS3製作倒影的實作步驟的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn