mask-image 在移动端不能单独使用，必须配合 background-image 或 background-color 才能显示；ios safari 要求 -webkit-mask-image 和 mask-image 同时存在且值一致，并仅支持 base64 编码的内联 svg；需用 mask-size: 100% 100% 和 mask-repeat: no-repeat 保证清晰度；颜色控制依赖底层 background；它不改变盒模型，故无法替代 shape-outside 实现文字环绕；灰度解析各浏览器不一致，须真机多端测试。
mask-image 在移动端做异形图标时，**不能只靠它自己显示内容**——没配 background-image 或 background-color，图标会“消失”，不是遮罩失效，是根本没东西可遮。
为什么 mask-image 在 iOS Safari 里图标不显示
Safari 对 mask-image 的限制最严：它拒绝解析带 #、空格或未编码的 SVG URL；mask-[url(...)] 这类 Tailwind 动态语法直接被忽略；且只认 -webkit-mask-image 和 mask-image 同时存在、值完全一致的写法。
- 错误写法：
mask-[url('/icons/home.svg')]→ Safari 当作无效，降级为无遮罩（但因无背景，看起来是空白） - 正确写法：必须用 base64 编码的内联 SVG，并同时声明两个属性：
-webkit-mask-image: url('data:image/svg+xml;base64,...');和mask-image: url('data:image/svg+xml;base64,...'); - 注意：base64 字符串里不能有换行或空格，否则 Safari 解析中断
如何让 mask-image 图标在不同屏幕尺寸下保持清晰轮廓
异形图标（如气泡、徽章、斜切角）一旦用 mask-image 套上，缩放时容易模糊或错位——问题不在图片本身，而在 mask-size 和 mask-repeat 没对齐实际渲染尺寸。
- 避免写死
mask-size: 24px 24px：在高 DPI 屏幕（如 iPhone 15 Pro）下，24px 物理像素可能只占 12 CSS px，导致遮罩图拉伸失真 - 推荐写法：
mask-size: 100% 100%+mask-repeat: no-repeat，让遮罩图严格贴合元素盒模型尺寸 - 若需响应式缩放（比如从 24px 切到 48px），用
clamp()控制容器宽高，再让mask-size跟着变，别反向操作
mask-image 配合 background-image 实现图标颜色可控
你没法直接给 mask-image 上色，但可以通过控制底层 background-image 或 background-color 来实现“图标换色”——这是移动端适配深色模式、主题切换的关键路径。
- 单色图标：用
background-color: currentColor，再配合color变量（如:root { --icon-color: #3b82f6; }），父级改color就自动换色 - 渐变图标：用
background-image: linear-gradient(...)，但注意 Safari 要求渐变色为纯灰度，所以得把渐变写在 background 侧，mask 侧只负责形状 - 禁止写
mask-image: url(icon.svg)同时又设background: url(icon.svg)——两层 SVG 叠加易触发渲染抖动，尤其低端 Android WebView
为什么 mask-image 无法替代 shape-outside 做文字环绕异形图标
想让文字绕着一个带三角气泡的图标走？mask-image 不行。它只裁剪视觉呈现，DOM 盒子仍是矩形，排版引擎完全无视透明区域。
-
mask-image改变的是“看起来什么样”，不影响float、shape-outside或文本流计算 - 真正能驱动文字环绕的只有
shape-outside: url(mask.png)（PNG 含 Alpha）或shape-outside: path("M...")，且该 PNG 必须通过 CORS 允许加载（file://协议下 Safari 直接拒载） - 移动端 fallback 方案：用
clip-path+media query切换简单多边形（如clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%)），虽不如 mask 精细，但兼容性稳得多
最常被忽略的一点：mask-image 的灰度逻辑在不同浏览器里不统一——Safari 把 transparent 当 #000（全显），Firefox 直接忽略渐变值，而 Chrome 需前缀才生效。上线前务必在真机上用 Safari、Chrome for iOS、Samsung Internet 三端实测同一段代码，不能只信 DevTools 模拟器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
