mask-image 无法改变元素盒模型，仅控制视觉显示区域的透明度；被遮罩部分仍占布局空间、响应事件，而 clip-path 才能真正裁剪盒模型边界并影响交互与流式布局。
mask-image 不是用来“裁剪盒子模型形状”的
直接说结论：mask-image 无法改变元素的盒模型（即 content-box、padding-box 等几何边界），它只控制**视觉显示区域的透明度**。你想让一个 div 的点击热区或布局占位变成三角形？mask-image 做不到——它盖住的部分只是“看不见”，但依然占据空间、响应事件、影响流式布局。
真正能修改盒模型可见轮廓的是 clip-path，它作用于整个盒模型边界（可配 clip-path: border-box 等关键字），且裁剪后区域不参与交互、不占渲染空间（除非用 fill 或 stroke 显式撑开）。
常见误用现象：
– 元素用了 mask-image: linear-gradient(black, transparent) 想做“从下往上渐隐”，结果鼠标还能点到被遮住的下半部分
– 用 PNG 遮罩切出星形，但父容器仍按矩形计算高度，导致下方内容被意外顶开
什么时候该用 mask-image 而不是 clip-path
核心判断依据：你是否需要基于**透明度过渡、图像纹理、动态 alpha 变化**来控制显示？
立即学习“前端免费学习笔记（深入）”；
- 要做毛玻璃边缘、烟雾状淡出、老电影胶片划痕效果 → 用
mask-image（支持半透明通道） - 要实现 SVG 图标镂空文字、视频叠加水墨晕染 →
mask-image: url(ink.svg)+mask-mode: luminance - 要兼容 Safari 15.4+ 且需动画路径 →
clip-path动画支持更好；但若动画需渐变软边，就得换mask-image配合@keyframes改变mask-position或渐变色 stops -
clip-path在 Firefox 中对border-box支持不稳定，而mask-image的盒模型参考始终是border-box（除非显式设mask-origin）
mask-image 实操中三个易踩的坑
mask-image 行为受多个隐式属性联动影响，单设它往往没效果：
- 默认不启用：必须同时设置
mask-mode: alpha（或luminance）和mask-repeat: no-repeat，否则可能被重复平铺或当纯黑处理 - 尺寸错位：遮罩图默认以
mask-origin: border-box为基准缩放，若你的 PNG 遮罩是 200×200px，但元素是 400×300px，得加mask-size: contain或具体数值，否则拉伸失真 - 混合模式干扰：如果父级有
filter: opacity(0.8)或transform，某些浏览器（特别是旧版 Safari）会中断 mask 渲染链，建议把 mask 直接写在目标元素上，避免继承污染
最小可用示例：
div {<br> width: 300px; height: 200px;<br> background: #3498db;<br> mask-image: radial-gradient(circle at center, black 60%, transparent 70%);<br> mask-mode: alpha;<br> mask-repeat: no-repeat;<br> mask-size: cover;<br>}
想实现“非矩形布局”？先分清你要改的是什么
所谓“非矩形布局”，实际包含三个不同层级的问题，选错方案会导致后续全部返工：
-
视觉层（用户看到的形状）→
mask-image或clip-path都可，前者适合软边/纹理，后者适合硬边/动画路径 -
交互层（可点击/悬停区域）→ 只有
clip-path裁剪后的区域默认不可交互；若用mask-image，得额外加pointer-events: none到隐藏区域的伪元素上模拟 -
布局层（影响其他元素的位置）→ 两者都不改变文档流；真要让文字环绕星形图片，得用
shape-outside+float，和 mask/clip-path 无关
最常被忽略的一点：CSS 遮罩和裁剪都**不改变元素的 computed height/width**。你在 DevTools 里看到的尺寸永远是原始矩形，调试时别被这个骗了。
