語法：

    默認(rèn)值：none
    適用于：所有元素
    繼承性：無

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

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

效果

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

效果

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

效果