CSS3中怎么利用box-reflect屬性設置文字倒影效果

這篇文章給大家介紹CSS3中怎么利用box-reflect屬性設置文字倒影效果，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

語法：

CSS Code復制內容到剪貼板

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

2. <direction> = above | below | left | rightright  

3. <offset> = <length> | <percentage>   

4. <mask-box-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>  

    默認值：none
    適用于：所有元素
    繼承性：無

取值：
    none：無倒影
    <direction>　Demo: 簡單圖片倒影 See with Webkit
    above：指定倒影在對象的上邊
    below：指定倒影在對象的下邊
    left：指定倒影在對象的左邊
    right：指定倒影在對象的右邊
    <offset>　Demo: 圖片與倒影間隔 See with Webkit
    <length>：用長度值來定義倒影與對象之間的間隔。可以為負值
    <percentage>：用百分比來定義倒影與對象之間的間隔。可以為負值
    <mask-box-image>　Demo: 更真實的圖片倒影 文字倒影與漸變 See with Webkit
    none：無遮罩圖像
    <url>：使用絕對或相對地址指定遮罩圖像。
    <linear-gradient>：使用線性漸變創建遮罩圖像。
    <radial-gradient>：使用徑向(放射性)漸變創建遮罩圖像。
    <repeating-linear-gradient>：使用重復的線性漸變創建背遮罩像。
    <repeating-radial-gradient>：使用重復的徑向(放射性)漸變創建遮罩圖像。

如果你需要一個簡單倒影，你可以這樣做：
代碼

CSS Code復制內容到剪貼板

1. box-reflect: below;  

效果

注意設置倒影元素的padding是會影響倒影位置的
<offset>允許你定義倒影與元素之間的距離：
代碼

CSS Code復制內容到剪貼板

1. box-reflect: below 10px;  

效果

<mask-box-image>允許你用Gradient圖像或image作為遮罩：
代碼

CSS Code復制內容到剪貼板

1. box-reflect: below 1px linear-gradient(transparent,transparent 50%,rgba(0,0,0,.3));  

效果

關于CSS3中怎么利用box-reflect屬性設置文字倒影效果就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。