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
參考資料: