CSS3中制作倒影box-reflect
目前僅在Chrome、Safari和Opera瀏覽器下支持
box-reflect:none | <direction> <offset>? <mask-box-image>?由于此屬性并不是W3C標準屬性,在具體使用之時,還是需要添加瀏覽器的私有屬性,根據瀏覽器的兼容性,使用box-reflect時需要添加-webkit和前綴:
-webkit-box-reflect:none | <direction> <offset>? <mask-box-image>? box-reflect:none | <direction> <offset>? <mask-box-image>?可惜的是在Firefox下并不支持這個屬性,不過值得慶幸的是,在Firefox下可以通過-moz-element()來模擬實現.
從box-reflect語法中可以得知,其主要包括以下幾個屬性值:
- none:此值為box-reflect默認值,表示無倒影效果;
- <direction>:此值表示box-reflect生成倒影的方向,主要包括以下幾個值:
- above:表示生成的倒影在對象(原圖)的上方;
- below:表示生成的倒影在對象(原圖)的下方;
- left:表示生成的倒影在對象(原圖)的左側;
- right:表示生成的倒影在對象(原圖)的右側;
- <offset>:用來設置生成倒影與對象(原圖)之間的間距,其取值可以是固定的像素值,也可以是百分比值,如:
- :使用長度值來設置生成的倒影與原圖之間的間距,只要是CSS中的長度單位都可以,此值可以使用負值;
- :使用百分比來設置生成的倒影與原圖之間的間距,此值也可以使用負值
- <mask-box-image>:用來設置倒影的遮罩效果,可以是背景圖片,也可以是漸變生成的背景圖像。
當對象(原圖)沒有足夠多的空間預留給生成的倒影放置的時候,將不會顯示出來。
第三個屬性<mask-box-image>給生成的倒影添加遮罩效果,我們可以通過兩種方式第一種是漸變生成的背景圖像,第二種是外部的背景圖像。
.box-reflect img {
-webkit-box-reflect: below 0 -webkit-linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,.0) 30%,rgba(250,250,250,0.3));
box-reflect: below 0 -webkit-linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,.0) 30%,rgba(250,250,250,0.3));
}
只能使用線性漸變給生成的倒影添加遮罩效果,而徑向漸變到目前還無任何效果。另外有一點特別需要提醒大家,給生成的倒影添加遮罩效果的時候,如果沒有設置顯式的間距<offset>將會讓box-reflect失效。也就是說,當box-reflect屬性中的<mask-box-image>屬性值出現時,必須顯式的設置<offset>值,如果不需要間距,將其設置為0。
用于遮罩的圖片必須是png格式圖片。
.box-reflect img {-webkit-box-reflect: below 0 url(http://cdn.w3cplus.com/sites/default/files/blogs/2014/1405/css-masking.png);box-reflect: below 0 url(http://cdn.w3cplus.com/sites/default/files/blogs/2014/1405/css-masking.png); }你將看到這樣的效果:
?
到目前為止,box-reflect屬性僅webkit內核的瀏覽器對其支持,在Firefox中有一個替代方案。那就是使用-moz-element()來替代
在圖片外面,我們有一個容器div,并且給他一個id名稱moz-reflect:
<div class="box-reflect" id="moz-reflect"><img src="http://cdn.w3cplus.com/sites/default/files/blogs/2014/1405/box-reflect.jpg" alt="" height="200" /></div>
我們通過偽類:after來模擬:
.box-reflect { margin: 10px auto; width: 200px; } #moz-reflect:after { content: ""; display: block; background: -moz-element(#moz-reflect) no-repeat; width: auto; height: 200px; -moz-transform: scaleY(-1); }模擬出來的效果如下:
?
轉載來自:http://www.w3cplus.com/css3/css3-box-reflect.html
?
轉載于:https://www.cnblogs.com/yuxingyoucan/p/6060856.html
創作挑戰賽新人創作獎勵來咯,堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的CSS3中制作倒影box-reflect的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: xps文档节点序列化,节点排序
- 下一篇: 博客园屏蔽广告CSS