CSS3之box-reflect制作倒影

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

參考資料:

【box-reflect】
【W3Cplus制作倒影】

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容