box-reflect可給兩種屬性值,一種是none,為默認值,也就是沒有任何倒影效果,另一種才是我們今天所要講的,它可以同時賦予三個屬性值,它們依次代表倒影方向、元素與倒影之間的距離以及加在倒影上的遮罩圖像,其中后兩個屬性值可以缺省,但如果<mask-box-image>存在,則<offset>必填。
說了那么多干巴巴的解釋,還是聯系一下示例應該更好理解些吧。
我們現在來一步步地實現文章開頭示例圖片的投影效果:
①只給一個屬性值below。
<!--HTML代碼-->< img class="img" src="imgs/cat.jpg" />
/*CSS代碼*/.img{ -webkit-box-reflect: below; box-reflect: below;}
實現效果:
②再加個5px的間距。
/*CSS代碼*/.img{ -webkit-box-reflect: below 5px; box-reflect: below 5px;}
實現效果:
③最后加個圖片遮罩吧。
/*CSS代碼*/.img{ -webkit-box-reflect: below 5px -webkit-linear-gradient(transparent 60%,rgba(0,0,0,.3));box-reflect: below 5px linear-gradient(transparent 60%,rgba(0,0,0,.3));}
這里的圖片遮罩沒有用圖片,而是用了CSS3中的linear-gradient屬性值,它就是用于線性漸變,具體用法這里就不提了,可以直接看這里( ),寫得很詳細。
實現效果:
這就是文章開頭示例圖片的最終效果。
接下來,再說說徑向漸變創建圖片遮罩和直接使用圖片遮罩。
徑向漸變的話其實跟線性漸變類似,只需要你掌握CSS3中基本的徑向漸變方法,給個簡單示例吧:
/*CSS代碼*/.img{ -webkit-box-reflect: left 0 -webkit-radial-gradient(#000 30%,transparent); box-reflect: left 0 radial-gradient(#000 30%,transparent);}
實現效果:
效果很棒!好像貓咪真的在照鏡子一樣~~
那如果直接使用圖片遮罩呢?比如說我用這樣一張圖片作為遮罩:
/*CSS代碼*/.img{ -webkit-box-reflect: right 0 url(imgs/mask.png); box-reflect: right 0 url(imgs/mask.png);}
實現效果:
可以看出,遮罩圖片會完全拉伸填充倒影圖片,并且效果是完全透明部分不會顯示出來(其實CSS3漸變圖片遮罩原理也跟這個是一樣的)。
需要注意的是,以上講的所有效果不僅僅可以用在圖片上,用在其他元素上也是完全可以的,比如說文字。
兼容性: box-reflect雖然看起來效果很不錯,但是遺憾的是,目前只有webkit內核瀏覽器兼容,不過移動端基本已經沒有任何問題啦~~
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com