CSS倒影

前面的话

  CSS倒影目前只有chrome和safari浏览器支持，且需要添加-webkit-前缀。本文将详细介绍CSS倒影box-reflect

 

语法

-webkit-box-reflect

初始值: none

应用于: 块级元素(包括inline-block)

继承性: 无

值: none |

<direction>

<offset>

?

<mask-box-image>

?

  

<direction>

(必须)表示box-reflect生成倒影的方向，主要包括以下几个值：

above:表示生成的倒影在对象(原图)的上方；
below:表示生成的倒影在对象(原图)的下方；
left:表示生成的倒影在对象(原图)的左侧；
right:表示生成的倒影在对象(原图)的右侧；

  

<offset>

(可选)用来设置生成倒影与对象（原图）之间的间距，其取值可以是固定的像素值，也可以是百分比值

  

<mask-box-image>

(可选)用来设置倒影的遮罩效果，可以是背景图片，也可以是渐变生成的背景图像

 

DEMO

style="width: 100%; height: 490px" src="https://owbhsauev.bkt.clouddn.com/css/reflect/r1.html" allowfullscreen frameborder="0">