共计 547 个字符，预计需要花费 2 分钟才能阅读完成。
-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
CSS-Doodle 利用 xor 这个属性，发明很多万花筒一样的图案：
https://codepen.io/Chokcoco/p…
参考资料：
https://developer.mozilla.org…
正文完