元素倒影-webkit-box-reflect

css3中的-webkit-box-reflect可以实现倒影效果，但浏览器必须是-webkit-内核才能实现此效果。

-webkit-box-reflect: direction offset mask-box-image

方位 direction

可以是下面4个值中的1个，above,below,left,right，分别表示上下左右。如果不是使用类似inherit等全局关键字，则此方位值是不能缺省的。

偏移大小 offset

倒影和原始元素偏移距离。可以是数值，也可以是百分比值。如果是百分比值，则百分比大小是相对于元素自身尺寸计算的。和transform中translate的百分比计算是一致的。

遮罩图片 mask-box-image

对元素倒影的遮罩控制。语法类似于background-image。
该图像将覆盖投影区域。如果省略该参数值，则默认为无遮罩图像。
取值：
（1）url或不填，指定路径或者不设置遮罩图像
（2）linear-gradient线性渐变创建遮罩图像。
（3）repeating-linear-gradient重复线性渐变创建遮罩图像。（4）repeating-url重复径向径向渐变创建遮罩图像。

.imgEle2 img {
    -webkit-box-reflect: below 10px -webkit-linear-gradient(transparent,transparent 50%,rgba(0,0,0,.8));
}

<div class="imgEle2" style="
    height: 400px;
">
      <img width="200px" src="https://cdn.pixabay.com/photo/2016/11/02/13/01/winter-1791370_960_720.jpg">
</div>