CSS Mask

📋 介绍

可以使用图像、渐变或SVG来控制元素的可见性。

核心原理：遮罩中的透明部分会让元素对应区域变得透明，不透明部分保持元素可见。

特点：

非破坏性：不会改变原始元素的结构和内容
灵活性强：支持图片、渐变、SVG等多种遮罩源
动画友好：可以轻松实现动态遮罩效果
性能优良：GPU加速，渲染效率高

🔧 基础属性解析

mask-image

定义遮罩图像源

mask-image: none | <image> | <mask-source>

图片

mask: url(mask.png);            /* 使用位图来做遮罩 */
mask: url(masks.svg#star);      /* 使用 SVG 图形中的形状来做遮罩 */

渐变

mask: linear-gradient(#000, transparent);

mask-position

定义遮罩位置

mask-position: top|bottom|left|right|center|percentage

mask-size

定义遮罩尺寸

mask-size: <bg-size>

mask-repeat

定义遮罩重复方式

mask-repeat: <repeat-style>

repeat: 默认值，遮罩会在图片区域重复绘制
space: 遮罩尽可能多的平铺，且遮罩之间产生间距，遮罩图片不会被裁剪
round: 遮罩会压缩或者拉伸占满整个图片
no-repeat: 遮罩不会重复

当 size 小于容器大小，并且不重复时，其他区域会直接不显示

mask-clip

定义mask-image作用的图片区域

mask-clip: content-box|padding-box|border-box|margin-box|fill-box|stroke-box|view-box|no-clip

🎨 mask-composite

mask-composite 属性定义了多个遮罩层之间的合成方式，类似于Photoshop中的图层混合模式。

支持的合成操作符

add（添加）

效果：将多个遮罩层相加
公式：A + B
适用场景：需要扩大遮罩范围时

subtract（减去）

效果：从第一个遮罩中减去后续遮罩
公式：A - B
适用场景：在遮罩中挖洞或创建缺口

intersect（交集）

效果：只保留重叠部分
公式：A ∩ B
适用场景：创建精确的遮罩区域

exclude（排除）

效果：保留非重叠部分
公式：A ∪ B - (A ∩ B)
适用场景：创建环形或复杂形状

-webkit-mask-composite 会有不同的值

-webkit-mask-composite: clear; /*清除，不显示任何遮罩*/
-webkit-mask-composite: copy; /*只显示上方遮罩，不显示下方遮罩*/
-webkit-mask-composite: source-over; 
-webkit-mask-composite: source-in; /*只显示重合的地方*/
-webkit-mask-composite: source-out; /*只显示上方遮罩，重合的地方不显示*/
-webkit-mask-composite: source-atop;
-webkit-mask-composite: destination-over;
-webkit-mask-composite: destination-in; /*只显示重合的地方*/
-webkit-mask-composite: destination-out;/*只显示下方遮罩，重合的地方不显示*/
-webkit-mask-composite: destination-atop;
-webkit-mask-composite: xor; /*只显示不重合的地方*/

💡 实用实践例子

1. 渐变边框效果 ✨

这是最经典的mask应用之一，可以创建渐变色的边框效果。

原理说明：

元素使用渐变背景作为边框颜色
创建两层mask，一层在 content-box ，一层默认
通过 mask-composite: subtract 让内层"挖空"外层，形成边框效果

2. 切角效果 🔲

使用多个线性渐变创建切角效果：