这是我参与11月更文挑战的第25天，活动详情查看：2021最后一次更文挑战
mask-image
mask-image属性的作用是设置使用遮罩效果的图像。语法mask-image: none | <image> | <mask-source>默认值为none，表示默认无遮罩图片。<image>表示图像数据类型，包括css渐变图像、image-set()函数、url()函数、cross-fade()和element()等函数，<mask-sourct>表示遮罩元素类型，主要指svg遮罩元素。
<div>
<img src="test.jpg" clss="warpper">
</div>
<style>
.warpper {
mask: no-repeat center/contain;
mask-image: url(box.png);
}
</style>
mask-mode
mask-mode属性的作用是根据资源的类型自动采用合适的遮罩模式，默认值为match-source。如果遮罩效果使用的是SVG中的<mask>元素，则此时的mask-mode属性的计算值是luminance，表示基于亮度判断是否要进行遮罩。如果是其他场景，则计算值是alpha，表示基于透明度判断是否要进行遮罩。支持3个属性值，分别是match-source、luminance和alpha，可以单个使用也可以多属性值一起使用。
mask-repeat
mask-repeat属性的默认值是repeat，作用类似于background-repeat属性。支持单属性值，repeat-x表示水平方向平铺。repeat-y表示垂直方向平铺。repeat是默认值表示水平和垂直方向均平铺。no-repeat表示不平铺，会看到只有一个遮罩图形位于左上角。space和background属性中的space的含义是类似的，表示遮罩图片尽可能地平铺，同时不进行任何剪裁。round表示遮罩图片尽可能靠在一起，没有任何间隙，同时不进行任何剪裁，这就可能造成图片会产生缩放效果。
mask-clip
mask-clip属性用来设置遮罩效果显示的盒子区域。mask-clip属性支持的属性值比较多，其中有border-box、padding-box、content-box、no-clip、fill-box、stroke-box和view-box。其中默认值为border-box，而且该属性不支持margin-box，但是支持多属性。mask-clip: padding-box border-box。no-clip的作用是不对元素的遮罩效果做区域上的限制。fill-box表示遮罩应用的区域是图形填充区域形成的边界盒子。stroke-box表示的遮罩区域把描边占据的区域也包含在内。view-box表示使用最近的svg视口作为参考盒子，如果svg代码中的viewbox属性有设置，则遮罩区域盒子位于viewbox属性建立的坐标系的原点，尺寸由viewbox属性中的宽高值决定。
<svg width="333" height="222" viewbox="0 0 333 222">
<ellipse cx="156" cy="78" rx="138" ry="64" class="mask-svg stroke-box"></ellipse>
</svg>
