CSS3蒙版 Mask

 

之前mask这个属性用的比较少,对它也并不了解，又一次在前端群里面五一看到人打了一个这样的属性出来，我感觉很陌生，马上去看了，原来真的有这么神奇的属性，蒙版，可以实现很多复杂多样化的遮罩。

语法：

 

-webkit-mask-image:url(circle.svg);

和background的样式语法是一样的，蒙版的alpha设置为0那后面的图片也不见了，设置为1才是可见。

 

还可以设置渐变:

 

-webkit-mask-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,1)),to(rgba(0,0,0,0)));

可以用渐变来代替图片做蒙版，都可以的。

 

也可以设置边框遮罩，语法：

 

-webkit-mask-box-image:url(m1.png) 0 round;

具体的语法：

 

观看w3c的教程和API