首頁 >web前端 >css教學 >用CSS3製作倒影的實作步驟

用CSS3製作倒影的實作步驟

php中世界最好的语言
php中世界最好的语言原創
2017-12-01 14:38:371648瀏覽

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

box-reflect:none | <direction> ?

none:此值為box-reflect預設值,表示無倒影效果;

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

above:表示產生的倒影在物件(原圖)的上方;

below:表示生成的倒影在物件(原圖)的下方;

left:表示生成的倒影在物件(原圖)的左邊;

right:表示生成的倒影在物件(原圖)的右邊;

offset:用來設定生成倒影與物件(原圖)之間的間距,其取值可以是固定的像素值,也可以是百分比值,如:

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

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

mask-box-image:用來設定倒影的遮罩效果,可以是背景圖片#,也可以是漸層產生的背景圖片

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


相關閱讀:

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

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

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

以上是用CSS3製作倒影的實作步驟的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn