CSS形状合成：用mask控制显隐区域

CSS中的mask属性凭借基于图像的像素级透明度控制能力，成为比clip-path更强大、更灵活的形状合成工具——它支持羽化边缘、多形状布尔运算（如交集镂空）、alpha渐变过渡等精细效果，而clip-path仅能实现非黑即白的硬裁剪；通过结合SVG定义复杂几何逻辑、CSS渐变创建动态遮罩动画，以及合理配置mask-composite、mask-mode等子属性，开发者能精准操控元素的显隐区域，但需注意浏览器兼容性、display与overflow等常见失效陷阱，真正稳健的复杂合成往往仍依赖内联SVG方案。

mask属性为什么比clip-path更适合做形状合成

mask 的核心优势在于它用图像（包括渐变、SVG 或 PNG）定义透明度通道，能精确控制每个像素的显隐程度；而 clip-path 只能做硬裁剪——非显即隐，没有中间态。当你需要羽化边缘、叠加多个形状做镂空交集、或让某区域按 alpha 通道渐变淡出时，mask 是唯一可行路径。

• mask 支持 mask-image（可设为 linear-gradient、radial-gradient、url(#svg-mask) 等）
• mask-mode 决定是当 alpha 遮罩（默认）还是 luminance 遮罩（对灰度更敏感）
• mask-composite 控制多个 mask 图层的布尔运算（如 intersect、exclude），这才是“形状合成”的关键

用 SVG 元素实现两个圆形的交集镂空

直接在 CSS 里写 mask 值不够灵活，尤其涉及多个几何图形逻辑运算时，嵌入内联 SVG 的 更可控。

<svg width="0"    style="max-width:100%">
  <defs>
    <mask id="circle-intersect">
      <rect width="100%" height="100%" fill="white"/>
      <circle cx="50" cy="50" r="30" fill="black"/>
      <circle cx="80" cy="50" r="30" fill="black"/>
    </mask>
  </defs>
</svg>

然后在元素上应用：

mask: url(#circle-intersect);

注意：SVG 中白色 = 完全显示，黑色 = 完全隐藏，灰色 = 半透。上面例子先铺白底，再用两个黑圆“挖掉”区域——最终只保留两圆重叠部分可见（因为只有那里被两个黑圆同时覆盖过，其余地方至少有一处是白的）。

• 必须把 SVG 放在 DOM 中（哪怕 width="0"），否则 url(#...) 无法解析
• 默认坐标系是“用户坐标系”，不是元素自身尺寸，建议加 maskUnits="userSpaceOnUse" 显式控制
• 不要省略 白底，否则默认是全透明（整个元素消失）

用 CSS 渐变做 mask-image 实现动态形状过渡

mask-image 接收 CSS 渐变时，能轻松做出基于位置/方向的显隐变化，比如“从左滑入遮罩”或“中心聚焦放大显示”。

mask-image: linear-gradient(to right, transparent 40%, black 40% 60%, transparent 60%);

这个渐变会让元素中间 20% 区域显示，左右各 40% 透明——本质是横向条形“窗口”。配合 mask-size 和 mask-position，就能模拟移动遮罩效果：

• mask-size: 200% 100%; + mask-position: -100% 0; → 整个遮罩向右偏移，露出左侧

• 动画 mask-position 就能实现平滑滑入（注意：Firefox 对 mask-position 动画支持良好，Chrome 需加 -webkit-mask-position 前缀）

• mask-image 不支持 repeating-linear-gradient（会报错），要用重复效果得靠 SVG 或 JS 控制多层 mask

• 渐变色标必须用 transparent 或含 alpha 的颜色（如 rgba(0,0,0,0)），不能用 white/black 混用，否则 alpha 通道行为不一致

mask 失效的三个高频原因

mask 看似简单，但实际项目中常因底层机制被忽略而完全没反应：

• 元素没设置 display（如 display: inline）→ mask 只对块级或替换元素生效，建议统一加 display: block 或 display: inline-block
• 父容器有 overflow: hidden 且 mask 区域超出父边界 → mask 计算在父容器裁剪之后，导致部分遮罩失效，可临时加 overflow: visible 排查
• 使用了 mask-border 但未配 mask-source → 这个属性已废弃，现代写法只用 mask 简写或 mask-image + mask-size 等组合

mask 的合成能力藏在 mask-composite 和多层 mask-image 的叠加逻辑里，但浏览器兼容性仍需留意：Safari 15.4+ 才支持 mask-composite，Chrome 和 Firefox 则要求 -webkit-mask-composite / mask-composite 并存。真正做复杂形状交并补，往往得回退到 SVG —— 它稳定、可预测，也更容易调试。

今天关于《CSS形状合成：用mask控制显隐区域》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！