mask-image仅控制透明度，不改变颜色，实际显示颜色由下方元素的background决定；需确保遮罩图为单通道（如svg中fill="black"为可见区），并注意safari兼容性及前缀问题。
mask-image 本身不支持直接填色，必须靠底层元素配合
mask-image 只控制透明度（alpha 通道），它不会改变颜色——哪怕你用 mask-image: linear-gradient(red, blue)，实际生效的也只是渐变的「遮罩强度」，不是颜色本身。真正显示什么颜色，取决于 mask 下方的元素（比如一个 <div> 的 <code>background-color 或 background-image）。
常见错误是写成这样却期待红色三角形：
div { mask-image: url("triangle.svg"); background: red; }结果发现啥也没显示——因为 SVG 遮罩里没定义 alpha 信息（比如 fill="black" 表示完全可见，fill="white" 在某些浏览器下反而不可见），或者 SVG 没导出为 alpha-only 格式。
- 确保遮罩图像是单通道：SVG 中用
fill="black"表示显示区域，fill="transparent"或fill="white"（需注意浏览器差异）表示隐藏区域 - 推荐优先用
mask-image: url(...)+background-color组合，比依赖 SVG 内联样式更可控 - 如果要用 CSS 渐变做遮罩（如
mask-image: radial-gradient(circle, black 50%, transparent 51%)），记住：黑色 = 显示，透明 = 隐藏，中间过渡决定边缘软硬
用 mask-image + background 实现纯色形状的最小可行写法
想画一个带圆角的红色菱形，最简路径不是写一堆 transform，而是用 mask-image 切形状、background 填色：
div {
width: 200px;
height: 200px;
background: #e74c3c;
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,0 200,100 100,200 0,100' fill='black'/%3E%3C/svg%3E");
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
}
关键点：
- SVG 必须 URL 编码（空格、
、<code>>等都要转义），否则解析失败，浏览器静默忽略mask-image -
mask-size: contain确保图形完整居中；不用cover，否则可能裁切 - 别漏掉
mask-repeat: no-repeat，默认是 repeat，小图形会平铺成诡异效果 - 若想换色，只改
background即可，遮罩 SVG 一劳永逸
mask-image 在 Safari 和 Chrome 中的兼容性坑
Safari（尤其是 iOS 16.4 之前）对 mask-image 的 SVG 支持极不稳定：它可能把 fill="black" 当作透明，或拒绝解析内联 data URL。Chrome 相对好些，但仍有边界问题。
- 测试时务必在真机 Safari 上验证，模拟器有时表现不同
- 避免在 SVG 中使用
stroke、opacity或 filter——这些在 mask 上基本无效甚至引发崩溃 - 稳妥方案：用 PNG 代替 SVG 作为遮罩图（黑底白形，8-bit alpha），
mask-image: url(mask.png)兼容性更好 - CSS mask 属性在 Firefox 中需要
-webkit-mask-image前缀才能生效（即使现代版本），别省略
用 mask-border-image 替代 mask-image？别踩这个坑
看到 mask-border-image 就想试试？停手。它和 mask-image 完全不是一回事：mask-border-image 是给 border 区域加遮罩，不是给整个盒模型。你设了 mask-border-image 却没设 border，那等于没设；设了 border: 10px solid transparent，遮罩也只作用于这 10px 边框带，内容区依然裸奔。
真正要形状着色，盯死这三样：
-
mask-image（定义“哪里能看见”） -
background或background-image（定义“看见什么颜色/图案”） -
mask-size/mask-position（确保对齐，尤其用 SVG 或 PNG 时）
复杂形状的 alpha 控制容易被低估——一张遮罩图里 1px 的灰阶误差，在高 DPR 屏上可能导致边缘发虚或漏色。动手前先用 DevTools 的 Rendering 面板打开 “Paint flashing”，确认 mask 是否按预期逐像素生效。
