-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)));}效果：
使用css制作倒影
原文地址：https://www.cnblogs.com/mmykdbc/p/9523223.html