box-reflect:

  语法:box-reflect:none | <direction> <offset>? <mask-box-image>?因为不是w3c标准,所以在使用的时候要加上浏览器的私有属性

  none:默认值,表示没有倒影;

  direction:倒影生成的方向,分为上下左右,取值分别为above,below,left和right

  offset:表示生成倒影与原图像的距离

  mask-box-image:用来设置倒影的遮罩效果,可以是背景图片,也可以是渐变生成的背景图像;

示例:倒影(box-reflect)-LMLPHP

显示结果如下:倒影(box-reflect)-LMLPHP可以发现图片上方只出现了一点倒影,并不是全部,这是因为,在给图片加倒影的时候,一定要给倒影生成的方向加上足够的位置。否则,只是会生成图片,而不会完全呈现出来。这时,给body加上100px的填充:

倒影(box-reflect)-LMLPHP这时就可以看到图片的倒影了。当然,其他方向也是如此。

下面以right为例说明,倒影(box-reflect)-LMLPHP可以看到,生成的倒影与图片完全贴合。这时候,给box-reflect加上第二个属性offset

倒影(box-reflect)-LMLPHP效果如下:倒影(box-reflect)-LMLPHP可以看到图像之间产生了一段间隙,这就是offset属性

给倒影添加遮罩效果(以向下的倒影举例);

我们可以通过两种方式第一种是渐变生成的背景图像,第二种是外部的背景图像

以渐变为例,没有找到好的背景图片;向下的倒影效果如下:

倒影(box-reflect)-LMLPHP在原来的基础上添加第三个渐变属性

倒影(box-reflect)-LMLPHP

效果如下:

倒影(box-reflect)-LMLPHP

需要说明的是,在设置渐变的时候,前面一定要有2个参数,否则不生效,另外,径向渐变目前还不支持

05-11 19:31