box-reflect
box-reflect：none | <direction> <offset> ? <mask-box-image> ?
参数：<direction>
参数
above|below|left|right
none: 无倒影
above：指定倒影在对象的上边
below：指定倒影在对象的下边
left：指定倒影在对象的左边
right：指定倒影在对象的右边
参数：<offset>
<length>|<percentage>
<length>: 用长度值来定义倒影与对象之间的间隔。可以为负值
<percentage>: 用百分比来定义倒影与对象之间的间隔。可以为负值
参数：<mask-box-image>
none|<url>|<linear-gradient>|<radial-gradient>|<repeating-linear-gradient>|<repeating-radial-gradient>
none：无遮罩图像
<url>: 使用绝对或相对地址指定遮罩图像。
<linear-gradient>: 使用线性渐变创建遮罩图像
<radial-gradient>: 使用径向(放射性)渐变创建遮罩图像
<repeating-linear-gradient>：使用重复的线性渐变创建背遮罩像
<repeating-radial-gradient>：使用重复的径向(放射性)渐变创建遮罩图像
下面就开始简单的玩耍一下吧
准备两张图片吧
image
image
简单的demo
倒影的位置一定要有空间可看到
-webkit-box-reflect: left;
效果：
image.png
-webkit-box-reflect: right;
效果：
image.png
-webkit-box-reflect: above;
image.png
-webkit-box-reflect: below -2px;// -2px是为了去掉连接处的缝隙
image.png
如何加遮罩效果呢
-webkit-box-reflect: right 0px -webkit-linear-gradient(left,transparent,rgba(0,0,0,0.6));
image.png
-webkit-box-reflect: left -1px -webkit-linear-gradient(left,rgba(12,93,163,0.8),rgba(12,93,163,0.1));
image.png
注意： 假设定义了<mask-box-image>，<offset>必须指定，否则可以省略
添加字的倒影
-webkit-box-reflect: below 0 -webkit-linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,.0) 50%,rgba(250,250,250,0.1));
image.png
兼容性
image.png
参考资料：
