此属性并不是W3C标准属性,在具体使用之时,还是需要添加浏览器的私有属性,根据浏览器的兼容性,使用box-reflect
时需要添加-webkit
和前缀:
-webkit-box-reflect:none | <direction> <offset>? <mask-box-image>?
box-reflect:none | <direction> <offset>? <mask-box-image>?
box-reflect取值说明
从box-reflect
语法中可以得知,其主要包括以下几个属性值:
none
:此值为box-reflect
默认值,表示无倒影效果;<direction>
:此值表示box-reflect
生成倒影的方向,主要包括以下几个值:above
:表示生成的倒影在对象(原图)的上方;below
:表示生成的倒影在对象(原图)的下方;left
:表示生成的倒影在对象(原图)的左侧;right
:表示生成的倒影在对象(原图)的右侧;
<offset>
:用来设置生成倒影与对象(原图)之间的间距,其取值可以是固定的像素值,也可以是百分比值
我们回到教程中来,首先按照前面介绍的方法,给对像生成一个向下的倒影,并且给box-reflect
加上<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));
}
效果如下:
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
原文: https://www.w3cplus.com/css3/css3-box-reflect.html © w3cplus.com
扫描二维码关注公众号,回复:
1938174 查看本文章