mask属性在现代浏览器中基本不可用，Chrome 112+、Firefox 110+、Safari 16.4+虽支持但行为不一致，SVG引用或URL值常致元素消失；稳定方案是mask-image配合内联SVG或data URL，并显式声明mask-mode。
mask属性在现代浏览器中基本不可用
直接说结论：mask CSS 属性（尤其是 mask 简写属性）在 Chrome 112+、Firefox 110+ 和 Safari 16.4+ 虽然支持，但行为不一致，且对 mask-image 的 SVG 引用、渐变或 URL 值兼容性极差——多数情况下元素直接消失或遮罩完全失效。这不是写法问题，而是规范落地混乱导致的现实约束。
替代方案：优先用 mask-image + SVG 内联定义
真正稳定可用的是 mask-image 配合内联 或 data URL 形式的 SVG 遮罩图。外部 SVG 文件受同源策略和 CORS 限制，极易报 Failed to load resource: net::ERR_BLOCKED_BY_CLIENT 或静默失败。
-
mask-image必须配合mask-mode: luminance（默认）或mask-mode: alpha显式声明，否则 Safari 可能忽略亮度通道解析 - SVG 中的
id，并在 CSS 中通过url(#myMask)引用；不能省略# - 遮罩 SVG 推荐用
fill-opacity，它在部分浏览器中不参与遮罩计算
<div style="mask-image: url(#fadeMask); -webkit-mask-image: url(#fadeMask);"> <svg width="0" height="0"><defs><mask id="fadeMask"><rect width="100%" height="100%" fill="white"></rect><rect y="0" width="100%" height="30%" fill="black"></rect></mask></defs></svg> 内容区域 </div>
遇到 mask 不生效？先查这三件事
90% 的“遮罩没反应”不是代码错，而是被底层限制卡住：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 目标元素必须有明确的
background-color或background-image，透明底色下遮罩不可见（mask作用于背景，不是元素本身轮廓） - 父容器设置了
overflow: hidden且遮罩区域超出父盒，会直接裁剪掉遮罩效果，建议临时改为overflow: visible排查 - 使用了
mask-border或mask-composite等实验性属性，这些在 Safari 和 Firefox 中几乎无支持，删掉再试
更简单的场景：用 clip-path 替代 mask
如果只需要几何形状裁切（比如圆形、多边形、弧线），clip-path 是更轻量、兼容性更好（Chrome 55+、Firefox 54+、Safari 15.4+）的选择，且无需 SVG 定义：
-
clip-path: circle(50% at center)实现圆形裁切，比等效 mask SVG 少 8 行代码 -
clip-path: path("M0,0 Q100,50 0,100")支持 SVG path 语法，适合不规则边缘 - 注意：
clip-path裁切的是整个元素盒（含边框、阴影），而mask只影响背景绘制层
真正需要像素级灰度控制（比如羽化、渐变透明、图像驱动遮罩）时，才值得投入精力调试 mask-image + 内联 SVG；其余情况，clip-path 或伪元素叠加半透层往往更快更稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
