目前仅在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);
}
模拟出来的效果如下: