使用css制作倒影

-webkit-mask

这个属性是相当强大的，所以详细的介绍超出了本文的范畴，它非常值得深入研究，因为它可以在实际应用中为你省掉很多时间。

-webkit-mask让为一个元素添加蒙板成为可能，从而你可以创建任意形状的花样。蒙板可以是CSS3渐变或者半透明的PNG图片。蒙板元素的alpha值为0的时候会覆盖下面的元素，为1的时候会完全显示下面的内容。相关的属性有-webkit-mask-clip、 -webkit-mask-position 和-webkit-mask-repeat等，严重依赖来自于background中的语法。

 

示例

图片蒙板:

.mask {
  width: 50px;
  height: 50px;
  background: url("./logo.svg") repeat;
  -webkit-mask: url("./logo.svg");
}

　　效果：

 

 

示例

渐变蒙板:

.mask {
  width: 50px;
  height: 50px;
  background: url("./logo.svg") repeat;
  -webkit-mask: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
}

　　效果：