CSS 剪裁和遮罩：概述和区别
例子
使用Clipping和Masking，您可以使元素的某些指定部分透明或不透明。两者都可以应用于任何HTML元素。
剪裁
剪辑是矢量路径。在这条路径之外，元素将是透明的，在它里面是不透明的。因此，您可以clip-path在元素上定义属性。SVG中也存在的每个图形元素都可以在此处用作定义路径的函数。例子是circle(),polygon()或ellipse()。
例子
clip-path: circle(100px at center);
该元素将仅在此圆内可见，该圆位于元素的中心，半径为100像素。
掩蔽
蒙版类似于剪辑，但不是定义路径，而是定义元素上的蒙版。你可以把这个面具想象成一个主要由两种颜色组成的图像：黑色和白色。
亮度蒙版：黑色表示该区域不透明，白色表示透明，但也有一个半透明的灰色区域，因此您可以进行平滑过渡。
Alpha蒙版：只有在蒙版的透明区域，元素才会不透明。
例如，此图像可用作亮度蒙版，使元素从右到左以及从不透明到透明的过渡非常平滑。
该mask属性可让您指定遮罩类型和用作图层的图像。
例子
mask: url(masks.svg#rectangle) luminance;
在rectangle定义中调用的元素masks.svg将用作元素上的亮度蒙版。