box-reflect
box-reflect：none | <direction> <offset> ? <mask-box-image> ?
參數：<direction>
參數
above|below|left|right
none: 無倒影
above：指定倒影在對象的上邊
below：指定倒影在對象的下邊
left：指定倒影在對象的左邊
right：指定倒影在對象的右邊
參數：<offset>
<length>|<percentage>
<length>: 用長度值來定義倒影與對象之間的間隔?？梢詾樨撝?br><percentage>: 用百分比來定義倒影與對象之間的間隔。可以為負值
參數：<mask-box-image>
none|<url>|<linear-gradient>|<radial-gradient>|<repeating-linear-gradient>|<repeating-radial-gradient>
none：無遮罩圖像
<url>: 使用絕對或相對地址指定遮罩圖像。
<linear-gradient>: 使用線性漸變創建遮罩圖像
<radial-gradient>: 使用徑向(放射性)漸變創建遮罩圖像
<repeating-linear-gradient>：使用重復的線性漸變創建背遮罩像
<repeating-radial-gradient>：使用重復的徑向(放射性)漸變創建遮罩圖像
下面就開始簡單的玩耍一下吧
準備兩張圖片吧
image
image
簡單的demo
倒影的位置一定要有空間可看到
-webkit-box-reflect: left;
效果：
image.png
-webkit-box-reflect: right;
效果：
image.png
-webkit-box-reflect: above;
image.png
-webkit-box-reflect: below -2px;// -2px是為了去掉連接處的縫隙
image.png
如何加遮罩效果呢
-webkit-box-reflect: right 0px -webkit-linear-gradient(left,transparent,rgba(0,0,0,0.6));
image.png
-webkit-box-reflect: left -1px -webkit-linear-gradient(left,rgba(12,93,163,0.8),rgba(12,93,163,0.1));
image.png
注意： 假設定義了<mask-box-image>，<offset>必須指定，否則可以省略
添加字的倒影
-webkit-box-reflect: below 0 -webkit-linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,.0) 50%,rgba(250,250,250,0.1));
image.png
兼容性
image.png
參考資料：
