.original{background:#000;mask:radial-gradient(circleat100%0,#000,#000200px,transparent200px);}如果我想得到这样的效果：我应该怎么做？我们尝试结合以上两种蒙版的效果：.mask{background:#000;mask:radial-gradient(circleat100%0,#000,#000200px,transparent200px),radial-gradient(circleat00,#000,#000200px,transparent200px);}效果如下：和我们想象的不太一样，因为两个蒙版的图形叠加就是上面图形的效果，所以上面的效果是没有问题的。只不过我们要得到的是两个mask图形重叠的部分：这时候我们可以使用mask-composite:.mask{background:#000;蒙版：径向渐变（圆圈在100%0，#000，#000200px，透明200px），径向渐变（圆圈在00，#000，#000200px，透明200px）；-webkit-mask-composite:source-in;}添加了-webkit-mask-composite:source-in之后，我们就可以得到两个遮罩图形的重叠部分，然后将重叠部分应用于整个遮罩遮罩：CodePenDemo--mask-compositeDemo-webkit-mask-composite也可以实现很多不同的功能，包括但不限于：-webkit-mask-composite:clear;/*清除，不显示任何遮罩*/-webkit-mask-composite:copy;/*只显示上掩码，不显示下掩码*/-webkit-mask-composite:source-over;-webkit-mask-composite：来源；/*只显示重叠的地方*/-webkit-mask-composite:source-out;/*只显示上面的mask，重叠的地方不显示*/-webkit-mask-composite:source-atop;-webkit-mask-composite:destination-over;-webkit-mask-composite:destination-in;/*只显示重叠的地方*/-webkit-mask-composite:destination-out;/*只显示下面的mask，重叠的地方不显示*/-webkit-mask-composite:destination-atop;-webkit-mask-复合：异或；/*只显示不重叠的地方*/看这张图，一目了然（图图片来源于cssmask实现鼠标跟随镂空效果）使用-webkit-mask-composite实现图片的展开基于以上知识，回到我们的主题，我们有了透明图片（PNG/SVG）后)，我们可以很方便的使用-webkit-mask-composite得到它的反向镂空图片：.mask{background:#000;遮罩：url($img)、线性渐变(#fff、#000)；mask-composite:exclude;}不仅如此，我们还可以利用这个技巧，将图片本身作为遮罩，配合-webkit-mask-composite，将纯色图片展开成各种颜色，甚至渐变色！