mask比clip-path更适合形状合成，因其通过图像定义像素级透明度，支持羽化、多形状交集及alpha渐变；clip-path仅支持硬裁剪。
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 的 <mask></mask> 更可控。
<svg width="0" height="0"><defs><mask id="circle-intersect"><rect width="100%" height="100%" fill="white"></rect><circle cx="50" cy="50" r="30" fill="black"></circle><circle cx="80" cy="50" r="30" fill="black"></circle></mask></defs></svg>
然后在元素上应用：
mask: url(#circle-intersect);
注意：SVG <mask></mask> 中白色 = 完全显示，黑色 = 完全隐藏，灰色 = 半透。上面例子先铺白底，再用两个黑圆“挖掉”区域——最终只保留两圆重叠部分可见（因为只有那里被两个黑圆同时覆盖过，其余地方至少有一处是白的）。
- 必须把 SVG 放在 DOM 中（哪怕
width="0"），否则 url(#...) 无法解析
-
<mask></mask> 默认坐标系是“用户坐标系”，不是元素自身尺寸，建议加 maskUnits="userSpaceOnUse" 显式控制
- 不要省略
<rect></rect> 白底，否则默认是全透明（整个元素消失）
用 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 值不够灵活，尤其涉及多个几何图形逻辑运算时，嵌入内联 SVG 的 <mask></mask> 更可控。
<svg width="0" height="0"><defs><mask id="circle-intersect"><rect width="100%" height="100%" fill="white"></rect><circle cx="50" cy="50" r="30" fill="black"></circle><circle cx="80" cy="50" r="30" fill="black"></circle></mask></defs></svg>
然后在元素上应用：
mask: url(#circle-intersect);
注意：SVG <mask></mask> 中白色 = 完全显示，黑色 = 完全隐藏，灰色 = 半透。上面例子先铺白底，再用两个黑圆“挖掉”区域——最终只保留两圆重叠部分可见（因为只有那里被两个黑圆同时覆盖过，其余地方至少有一处是白的）。
- 必须把 SVG 放在 DOM 中（哪怕
width="0"），否则url(#...)无法解析 -
<mask></mask>默认坐标系是“用户坐标系”，不是元素自身尺寸，建议加maskUnits="userSpaceOnUse"显式控制 - 不要省略
<rect></rect>白底，否则默认是全透明（整个元素消失）
用 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
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
