在 CSS 的浩瀚海洋里有些属性像是聚光灯下的明星，比如 flex 和 grid，每天dou在被无数开发者反复咀嚼。而有些属性则像是角落里的扫地僧，平时不显山不露水，但一旦出手，就Neng解决那些让你抓耳挠腮的难题。mask 就是这样一个被严重低估的存在。

hen多人对它的印象还停留在“把图片切成圆”或者“Zuo个淡入淡出”的阶段。说实话，这有点像拿法拉利去送外卖——Neng用，但完全没发挥出它的实力。今天我们就来聊聊，当我们把 mask 按摩到极致时它究竟Neng为我们的界面带来什么样的视觉魔法。

不仅仅是遮罩：它是背景的“叛逆”双胞胎

要掌握 mask，其实不需要死记硬背新的语法。Ru果你Yi经对 background 属性烂熟于心，那么恭喜你，你Yi经学会了 90% 的 mask 知识。它们接受的数据类型几乎是一模一样的：图片、渐变、URL，甚至是 SVG。

唯一的区别在于“目的”。background 是为了装饰，往元素身上贴东西；而 mask 是为了取舍，决定元素身上哪部分留下来哪部分消失。

这里有个核心逻辑需要刻在脑子里：mask 不kan颜色，只kan透明度。在 mask 的世界里黑色意味着“消失”，白色意味着“保留”。至于你用的是红色渐变还是蓝色渐变，它根本不在乎。

.demo {
  background: url;
  -webkit-mask: linear-gradient;
  mask: linear-gradient;
}

这段代码干了一件hen简单的事：它把一张图片从左到右处理了一遍。左边是透明的，右边是白色的。于是一张平平无奇的 JPG 图片瞬间就有了一种“从虚无中浮现”的高级感。这种效果，你要是用 opacity 或者 rgba 叠加层去实现，不仅代码量翻倍，还会影响点击事件的穿透性。

打破几何的枷锁：异形裁切的艺术

常规的 CSS 形状，无非就是圆角矩形、圆形。一旦设计师给你扔过来一个带切角的按钮，或者一个内凹圆角的卡片，hen多前端的第一反应是：“切图吧，或者用 SVG。”

其实mask 配合渐变就Neng搞定这一切。我们来kankan怎么Zuo一个带切角的图片：

.notch-image {
  width: 300px;
  height: 200px;
  background: url no-repeat center/cover;
  -webkit-mask:
    linear-gradient top left,
    linear-gradient top right,
    linear-gradient bottom right,
    linear-gradient bottom left;
  -webkit-mask-size: 50% 50%;
  -webkit-mask-repeat: no-repeat;
  mask:
    linear-gradient top left,
    linear-gradient top right,
    linear-gradient bottom right,
    linear-gradient bottom left;
  mask-size: 50% 50%;
  mask-repeat: no-repeat;
}

这里的技巧在于“拼图”。我们用了四个线性渐变，每个负责处理一个角。比如左上角，我们定义了一个 135 度的渐变，前 15px 是透明的，后面立刻变成白色。四个角各司其职，拼在一起就是一个完美的切角矩形。

geng绝的是内切圆角。这种效果在按钮上hen常见，但Ru果你的按钮背景是复杂的渐变色，用 border-radius 根本Zuo不出来。这时候，radial-gradient 登场了：

.inset-btn {
  padding: 16px 48px;
  font-size: 16px;
  color: #fff;
  border: none;
  background: linear-gradient;
  -webkit-mask:
    radial-gradient top left,
    radial-gradient top right,
    radial-gradient bottom right,
    radial-gradient bottom left;
  -webkit-mask-size: 51% 51%;
  -webkit-mask-repeat: no-repeat;
  /* 标准属性省略，原理同上 */
}

kan懂了吗？我们在四个角落分别画了四个径向渐变。圆心在角落，12px 的范围内是透明的，13px 往外是白色的。这样，无论你的背景是五彩斑斓的黑还是极光渐变，douNeng被完美地裁切成内圆角形状。

布尔运算的胜利：mask-composite 的威力

Ru果说上面的技巧只是“剪纸”，那 mask-composite 就是“雕刻”。它允许你定义多个遮罩层之间的运算关系：是相加、相减，还是只取重叠部分？这简直就是 Photoshop 里的路径查找器功Neng搬到了浏览器里。

标准语法里我们有 addsubtractintersectexclude。但在 WebKit 内核的浏览器里你需要用 -webkit-mask-composite，这货的值有点反直觉：

-webkit-mask-composite: source-over; /* 对应 add */
-webkit-mask-composite: source-in; /* 对应 intersect */
-webkit-mask-composite: source-out; /* 只显示上层独有部分 */
-webkit-mask-composite: destination-out; /* 只显示下层独有部分 */
-webkit-mask-composite: xor; /* 对应 exclude */

来个实战案例：假设你想裁出一个“两个圆弧重叠”的形状，也就是月牙形或者某种复杂的几何图形。

.composite-demo {
  width: 300px;
  height: 200px;
  background: linear-gradient;
  -webkit-mask:
    radial-gradient,
    radial-gradient;
  -webkit-mask-composite: source-in; /* 关键：取交集 */
  mask:
    radial-gradient,
    radial-gradient;
  mask-composite: intersect;
}

Ru果不加 mask-composite，默认是 add，你会kan到两个圆并排在一起。加上 intersect后浏览器只会保留两个圆重叠的那部分区域。这种Neng力在制作复杂的 Logo 展示或者特殊图标时简直是救命稻草。

动起来：从静态到动态的跨越

Mask Zui让人抓狂的地方在于：CSS 渐变本身是不支持 transition 的。你想写个 transition: mask 0.3s？浏览器会无情地无视你。因为渐变属于图像，浏览器没法在两个图像之间Zuo插值计算。

但这难不倒我们。目前有两种主流的“骚操作”来解决这个问题。

方案一：暴力美学

既然不Neng平滑过渡，那就把过渡拆成 100 帧。用 SCSS 的循环把每一帧的 mask 值写死。虽然编译后的代码体积感人，但兼容性那是杠杠的，连 IE douNeng跑。

@keyframes maskSlide {
  @for $i from 0 through 100 {
    #{$i}% {
      mask: linear-gradient(
        90deg,
        #fff #{$i + '%'},
        transparent #{$i + 15 + '%'}
      );
    }
  }
}

方案二：CSS Houdini 的黑魔法

这是现代浏览器的福音。通过注册自定义属性，告诉浏览器“这是一个百分比类型的变量”，浏览器就Neng聪明地对其进行插值计算了。

@property --conic-p {
  syntax: '';
  inherits: false;
  initial-value: -10%;
}
.transition-box {
  position: relative;
  width: 400px;
  height: 400px;
  background: url no-repeat center/cover;
  cursor: pointer;
}
.transition-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url no-repeat center/cover;
  pointer-events: none;
  -webkit-mask: conic-gradient(
    #fff 0deg,
    #fff var,
    transparent calc + 10deg),
    transparent 360deg
  );
  mask: conic-gradient(
    #fff 0deg,
    #fff var,
    transparent calc + 10deg),
    transparent 360deg
  );
}
.transition-box:hover::before {
  animation: conicSweep 0.5s ease-in-out forwards;
}
@keyframes conicSweep {
  from { --conic-p: -10%; }
  to { --conic-p: 100%; }
}

这段代码实现了一个经典的“扇形转场”。当你鼠标悬停时上层图片像雷达扫描一样，顺时针展开覆盖下层图片。这种效果以前只Neng用 Canvas 或者复杂的 SVG 动画Zuo，现在几行 CSS 就搞定了。

实战场景：弹幕避让与视觉融合

聊了这么多基础，Zui后来kankan一个稍微复杂点的真实场景：视频弹幕的“人物避让”。

在 B 站或者虎牙kan直播时你会发现弹幕飘过主播脸部时会神奇地“钻”到后面去。这其实不是什么 AI 实时追踪弹幕轨迹，而是利用了 mask。

原理hen简单：后端识别出人物轮廓，生成一个 SVG 或者一张带透明通道的 PNG 图片。前端拿到这个图，把它设为弹幕容器的 mask。

.barrage-container {
  position: absolute;
  inset: 0;
  /* 假设这里是一个动态的 mask 图片，中间是透明的，周围是白色的 */
  -webkit-mask: radial-gradient(
    circle at 100px 100px,
    transparent 60px,
    #fff 80px,
    #fff 100%
  );
  mask: radial-gradient(
    circle at 100px 100px,
    transparent 60px,
    #fff 80px,
    #fff 100%
  );
  animation: maskFollow 6s infinite alternate linear;
}
@keyframes maskFollow {
  to {
    -webkit-mask-position: 80vw 100px;
    mask-position: 80vw 100px;
  }
}

在这个简化的 demo 里我们用 radial-gradient 模拟了一个“洞”。mask 的逻辑是：透明区域的内容不可见。所以弹幕容器里对应这个“洞”位置的文字，就kan不见了。而“洞”底下是视频画面所以视觉上弹幕就像是从人物背后穿过一样。

同样的逻辑，我们还Ke以Zuo图片的“擦除”效果。比如两张图片叠在一起，上层图片加一个 mask，mask 的透明区域会露出下层图片。通过动画移动 mask-position，这个“擦除”的动作就会跟着移动。

兼容性与工程化：别让前缀绊倒你

虽然 mask hen强大，但浏览器支持情况还是有点坑爹的。目前，在 Chrome、Edge 等 Blink 内核浏览器中，大部分属性仍需 -webkit- 前缀。特别是 mask-composite，标准语法和 WebKit 语法简直是两个世界。

在实际工程中，千万别手写前缀，容易漏。直接上 autoprefixer

// postcss.config.js
module.exports = {
  plugins: ,
};

配置好后你只需要写标准语法，剩下的交给工具去处理。至于 mask-composite，在使用前务必去 Can I Use 上查一下目标浏览器的支持情况，毕竟这玩意儿在 Firefox 上的支持曾经是个老大难问题。

极限在于想象力

回到Zui初的问题：CSS mask 的应用极限是什么？

从技术上讲，它的极限就是浏览器的渲染性Neng和 Alpha 通道的计算Neng力。但从设计上讲，它的极限只在于你的想象力。

它Neng把一张普通的图片裁切成任何几何形状，Neng让两张图片以任何角度融合，Neng让文字像水流一样避开障碍物。它不需要复杂的 JavaScript 计算，不需要引入庞大的图形库，只需要几行 CSS 代码。

所以下次当你觉得“这个效果 CSS Zuo不出来”的时候，不妨停下来想一想：是不是Ke以用 mask 挖个洞试试？也许，答案就藏在那个透明的洞里。

---