CSS中常用的图形处理属性(Css常用属性)

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>

mask-size

​​mask-size​​作用是控制遮罩图片尺寸，性质类似于background-size属性，默认值是​​auto​​，支持​​contain​​和​​cover​​两个关键字属性值。也支持百分比值和长度值，如果垂直方向的尺寸省略，会自动计算为auto。也支持多属性值一起使用。

mask-size: contain;
mask-size: 44%;
mask-size: 6rem;
mask-size: 7px auto contain;

mask-composite

​​mask-composite​​属性表示同时使用多张图片进行遮罩时的合成方式，支持的属性值比较多，其中有​​add​​为默认值，表示遮罩累加。​​subtract​​表示遮罩相减也就是遮罩图片重合的区域不显示，意思就是遮罩图片越多，遮罩区域越小。​​intersect​​表示遮罩相交，也就是遮罩图片重合的区域才显示遮罩。​​exclude​​表示遮罩排除，也就是遮罩图片重合的区域被当作透明的,常常被用于渐变图像可以实现反向遮罩效果，应用于实现镂空的遮罩效果。

mask-composite: add;
mask-composite: subtract;
mask-composite: intersect;
mask-composite: exclude;

在谷歌浏览器中除了以上属性值，还有额外的属性值。例如​​source-over​​表示遮罩区域累加。​​source-in​​表示遮罩区域是交叉重叠的区域。​​source-out​​表示遮罩区域是上层图像减去其和下层图像重叠的区域。​​source-atop​​表示保留底层图像区域，并在其上方累加上层和下层图像重叠的区域。​​destination-over​​表示下层遮罩图像叠加在上层遮罩图像上，默认的遮罩模式是基于alpha通道计算的。​​destination-in​​表示遮罩区域是交叉重叠的区域。​​destination-out​​表示遮罩区域是下层区域图像减去其和上层图像重叠的区域。​​destination-atop​​表示保留上层图像区域，并在上方累加上层和下层图像重叠的区域。​​xor​​表示上层图像和下层图像重叠的区域透明。​​copy​​表示忽略下层图像，只使用上层图像区域作为遮罩区域。​​clear​​当遮罩图像有多张的时候，最终的遮罩效果是完全透明的。

-webkit-mask-composite: source-out;
-webkit-mask-composite: copy;

mask-border

​​mask-border​​属性是多个属性的缩写，​​mask-border-mode​​属性表示边框遮罩的模式，支持alpha和luminance这两个关键字属性值，分别表示遮罩效果是基于透明度还是基于亮度。​​mask-border-outset​​属性表示边框遮罩效果向外偏移的大小，支持长度值和数值，如果值是数值，则表示边框宽度borde-width属性值的倍数。

mask-border-outset: 3rem;
mask-border-mode: alpha;