最近业务中需要实现一些镂空的效果。看到这些效果我最初想到的是通过CSS的
mask 和
clip-path 来实现，甚至还想结合SVG相关的特性。为了验证自己的一些想法，开始着手撸码，但问题来了，在撸码的过程中，我发现自己对于
mask 的相关特性理解的还不够透彻。因此重新阅读 CSS Masking Module Level 1规范 中的文档和相关教程。才发现原来CSS Masking是如此的强大。下面是我自己对CSS Masking模块的一些理解，希望对大家学习和了解该功能模块有所帮助。简介
我对CSS Masking模块的最初认知：
CSS Masking就是CSS的
mask 属性（或
mask 相关的属性）！事实上，CSS Masking模块中包含了两个部分： masking （即：
mask ）和 clipping （
clip-path ）。这两种方式都可以帮助我们实现一些类似下图这样的镂空效果：
我将 Masking 译为 遮罩 。那怎么理解遮罩呢？简单或形象的理解，大至是这样的一个意思：
我有一个源，比如我们的页面
我有一个层（遮罩层），它可能是一张图像或一个图形元素
将两者合在一起，源在遮罩层下面
也就是说， Masking描述了如何使用另一个图形元素或图像作为亮度（luminance）或alpha遮罩 。遮罩层可以是一张图像也可以是SVG绘制的图形，通常使用CSS或SVG渲染出来的元素（包括其子元素）会被绘制到缓冲区，然后该缓冲区将被组合到元素的父元素中。官方这段描述我个人认为过于拗口，自己简单的理解正如上图，图像源和遮罩层将会创建一个缓冲区，并且源和遮罩层会有一个合成的计算，在合层阶段之前，亮度和Alpha遮罩会影响这个 缓冲区 的透明度。如此得到一个类似镂空的效果。
而 Cliping （剪切）描述了视觉元素的可见区域。可以使用某些SVG图形或基本形状来描述该区域。此区域之外的任何内容都将看不到。
简单地说，该规范定义了两种不同的图形操作，即， 完全 或 部分 地隐藏了对象的部分。
两者区别之处：
剪切 需要一个剪切路径，剪切路径可以是一个 闭合矢量路径 、 形状
