CSS mask-size 属性介绍

概述

CSS mask-size属性指定了用于CSS mask裁剪的遮罩大小。

遮罩(mask)是一种用于显示图像中特定部分的视觉效果，其实质是使用一张图作为模板，被指定遮罩的图像只有模板上的区域可见，其余部分被隐藏或填充。CSS的mask属性用于创建一个遮罩，并将其应用于一个元素的可见部分。

语法

mask-size: [ <length> | <percentage> | auto ]{1,2} [ , [ <length> | <percentage> | auto ]{1,2} ]*;

属性值

• 两个<length>或<percentage>值分别用于指定遮罩的宽度和高度。auto用于表示无效的长度值。
• 可以使用逗号分隔的多个值，每个值对应一个自定义遮罩框。

初始值

1.0 1.0

适用元素

所有元素

继承性

no

可动画性

yes

示例

.mask {
    /* 定义两个尺寸为50px的遮罩 */
    mask-size: 50px 50px, 50% 50%;
    /* 设置遮罩类型为圆形 */
    mask-type: circle;
}

浏览器兼容性

| Feature | Chrome | Firefox | Safari | Edge | Internet Explorer | | ---------- | ------ | ------- | ------ | ---- | ----------------- | | mask-size | 1.0 | 53.0 | 9.1 | 79 | No support |

总结

CSS mask-size属性允许开发者指定遮罩的大小。使用这个属性时需要搭配其他CSS mask相关属性一起使用，如mask-image，mask-repeat，mask-position等，才能真正实现自定义遮罩的效果。虽然在IE浏览器中不支持该属性，但其在现代浏览器中的兼容性还算良好。