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