-webkit-mask-composite

-webkit-mask-composite 是指在同时使用多个图片时，遮罩的混合方式。

它有以下值：

值	描述
source-over	源遮罩图像在目标遮罩图像上渲染
source-in	遮罩重叠的位置显示，不重叠的位置不显示
source-out	清除源遮罩图像和目标遮罩图像中的重叠像素；源遮罩图像的所有剩余像素均被渲染
source-atop	仅目标遮罩生效（最后一个遮罩）
destination-over	目标遮罩图像在源遮罩图像上渲染
destination-in	遮罩重叠的位置显示，不重叠的位置不显示
destination-out	清除源遮罩图像和目标遮罩图像中的重叠像素；源遮罩图像的所有剩余像素均被渲染
destination-atop	仅源遮罩生效（第一个遮罩）
xor	遮罩叠加处为透明，透明处与再与新的目标遮罩叠加为不透明，遵循乘法原理
clear	清除遮罩
copy	源遮罩图像替换目标遮罩
plus-lighter	相交的区域增亮，仅遮罩有透明度时生效

效果图如下：

查看线上效果

CSS-Doodle利用xor这个属性，创造很多万花筒一样的图案：
https://codepen.io/Chokcoco/p...

参考资料：
https://developer.mozilla.org...