CSS3之mask

说来惭愧,这是之前在一篇推送的文章中看到到到,由于自己平时的工作对这种需求比较少,而且通常遇到这样对需求都是以图片(背景)来做,直到看到幻术，一行代码实现镂空效果这篇文章,才发现还可以这么做,就想着自己总结以下 css3 对 mask 属性.

MDN 上对 mask 对描述如下:

Css 属性 mask 允许使用者通过部分或者完全隐藏一个元素的可见区域.这种效果可以通过遮罩或者裁切特定区域的图片

再看 mask 的属性:

属性名	属性值	属性描述
mask-border	mask-border-source,mask-border-slice,mask-border-width,mask-border-outset,mask-border-repeat,mask-border-mode	创建一个紧贴元素边框边缘的 mask
mask-clip	border-box, padding-box, content-box	放置 mask-clip 的方式
mask-composite	add, subtract, intersect,exclude	表示当同时使用多个图片进行遮罩时候的混合方式
mask-image	url(), image(), element()	设置元素上遮罩层的图像
mask-mode	alpha,luminance,match-source	根据资源的类型自动采用合适的遮罩模式
mask-origin	content-box,padding-box,border-box,fill-box,stroke-box,view-box	使用内容框固定 mask 图像
mask-position	top,right,bottom,left,center,(x,y)	mask 图像的位置
mask-repeat	repeat-x,repeat-y,repeat,no-repeat,space,round,(repeat-x,repeat-y)	mask 是否重复
mask-size	contain, cover, (width,height)	mask 图像大小
mask-type	luminance, alpha	设置不同的遮罩模式,只支持 svg

是不是觉得上表中的属性大多都似曾相识,确实大多数 css 属性都是相近的,所以作为前端工程师学习 mask 的成本是很低的,下面我就用一些实例来依次演示上面的属性.