HTML本身没有<mask>标签，所谓“HTML用mask”实为CSS的mask-image属性控制元素显示区域，需同时写-webkit-mask-image和mask-image双前缀，其颜色值代表透明度而非颜色，且仅作用于当前元素自身内容。
HTML 本身没有 <mask> 标签，所谓“HTML 用 mask”，实际是 CSS 的 mask（或更常用、兼容性更好的 mask-image）属性控制元素显示区域，它不改变 DOM 结构，只影响渲染——这点和 clip-path 或半透明 div 遮罩有本质区别。
mask-image 要写 -webkit- 前缀才生效？
是的，目前（2026 年 4 月）Firefox 已原生支持 mask-image，但 Chrome 和 Safari 仍**强依赖 -webkit-mask-image**。只写标准属性会直接失效。
- 必须同时写：
-webkit-mask-image: linear-gradient(...); mask-image: linear-gradient(...); -
mask简写属性（如mask: url(...) / 100% no-repeat;）同样需要双写前缀，且各浏览器对简写解析不一致，建议拆开写mask-image+mask-size+mask-repeat - 别指望
mask-border或mask-composite在生产环境稳定使用——它们连 Safari 最新版都未完全支持
linear-gradient 做 mask 时，颜色值代表什么？
不是“颜色”，是“透明度”：在 mask-image 中，rgba(0,0,0,0)（或 transparent）= 完全透明 = 对应区域**隐藏**；rgba(0,0,0,1)（或 black）= 完全不透明 = 对应区域**显示**。
- 错误写法：
linear-gradient(to right, white, black)——white在 mask 中等价于rgba(255,255,255,1)，即不透明，结果是“白的地方显示，黑的地方隐藏”，反直觉 - 正确写法：
linear-gradient(to right, transparent, black, transparent)—— 两端透明（隐藏），中间不透明（显示），常用于边缘渐隐 - 想做圆角遮罩？用
radial-gradient(circle at center, transparent 50%, black 51%)，注意 50%→51% 是硬切，避免模糊带
mask 和 z-index/position 冲突吗？
完全不冲突——mask 是绘制层（painting layer）操作，z-index 是层叠层（stacking layer）操作，二者正交。但容易混淆的点在于：
立即学习“前端免费学习笔记（深入）”；
-
mask只作用于**当前元素自身内容**（背景、子元素都会被裁切），不会像position: fixed遮罩层那样覆盖其他 DOM 元素 - 如果你发现 mask “没盖住下面的元素”，说明你误用了它——mask 不是用来做“蒙版弹窗”的，那是
div+z-index的事 - 想让 mask 效果和定位配合？确保被 mask 的元素本身有明确尺寸（
width/height），否则 mask 区域可能缩成 0×0
mask 实现不了全屏遮罩，该用什么？
直接放弃 mask，改用传统 div 遮罩层。这是最稳、最可控、调试最直观的方式：
- 全屏：用
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;（注意用vw/vh避免滚动条导致的宽度偏差） - 局部：父容器设
position: relative，遮罩层设position: absolute; top: 0; left: 0; width: 100%; height: 100%; - 关键细节：
background-color: rgba(0,0,0,0.5)比opacity: 0.5更安全——后者会触发新层叠上下文，导致z-index失效 - 阻止穿透：
pointer-events: auto（默认值）即可；若需点击关闭，就监听遮罩层自身的click事件
真正容易被忽略的是：mask 的调试几乎只能靠肉眼观察渐变断点和透明度过渡，没有类似 z-index 那样的开发者工具高亮；一旦效果不对，优先检查前缀是否漏写、gradient 方向是否反了、以及被遮罩元素有没有意外 collapse 掉高度。
