mask-image必须用#fff→#000黑白渐变，transparent在luminance模式下等价于#000导致全遮盖；需同时写mask-image和-webkit-mask-image，配合mask-size、mask-position及mask-origin精确控制遮罩范围与定位。
mask-image 必须用白→黑渐变，不能用 transparent
写 mask-image: linear-gradient(to right, #fff, transparent) 在多数浏览器里会失效，因为 transparent 在遮罩语义中等价于 #000（全黑），导致整个区域被“盖死”。真正起作用的是亮度值：纯白（#fff）= 100% 显示，纯黑（#000）= 0% 显示，中间灰阶决定透明比例。
正确写法是明确指定黑白过渡：
mask-image: linear-gradient(to right, #fff, #000)- 必须加
-webkit-mask-image前缀保 Safari 兼容（iOS/macOS 15.4+ 支持无前缀，但旧版仍需） - 别用
mask: linear-gradient(...)简写——它会重置mask-size、mask-repeat等，大概率让渐变拉伸或平铺错位
定位靠 mask-position + mask-size 控制渐变起始点和范围
渐变遮罩默认铺满整个元素盒模型，若只想让右边缘淡出，就得把白色起点“钉”在左边，黑色终点“拉”到右边——这靠 mask-position 和 mask-size 配合实现。
常见错误是只设渐变方向，却不控制尺寸，结果渐变被缩放得看不清过渡。
立即学习“前端免费学习笔记（深入）”；
-
mask-size: 100% 100%：确保渐变刚好覆盖元素宽高，不拉伸也不压缩 -
mask-position: 0 0：把渐变左上角对齐元素左上角（即白色从左边开始） - 若想从底部向上淡出，改用
mask-position: 0 100%+mask-image: linear-gradient(to top, #fff, #000) - 若元素宽高动态变化（如响应式卡片），
mask-size设为固定值（如200px 100px）反而更可控
绝对定位元素用 mask 要防 transform / backdrop-filter 干扰
给 position: absolute 或 fixed 元素加 mask-image，在 Safari 上容易突然失效——尤其当同时用了 transform（比如 translate()）或 backdrop-filter（毛玻璃）时。
这不是 bug，是 Safari 的合成图层策略：某些属性会让元素脱离遮罩渲染上下文。
- 强制重建隔离图层：
isolation: isolate是最直接的解法 - 避免在同一个元素上混用
transform和mask；可把 transform 移到父容器，mask 留给子元素 - 如果用了
backdrop-filter，优先考虑降级方案（如半透背景色 + 模糊伪元素），而非强撑 mask - 测试时务必在真机 Safari 上验证，模拟器常有渲染偏差
mask-position 定位不准？检查是否漏了 mask-origin
当你设了 mask-position: 20px 30px 却发现遮罩没按预期偏移，大概率是 mask-origin 默认值在作祟。它的默认值是 border-box，意味着坐标原点在 border 外边缘——而你通常想以 content 或 padding 区域为参考。
- 内容区定位（最常用）：
mask-origin: content-box - 内边距区定位：
mask-origin: padding-box - 如果元素没有 border 或 padding，三者表现一致；但一旦有，差异立刻显现
- 配合圆角元素时，
mask-origin: padding-box更易与border-radius对齐，避免遮罩切角错位
mask-origin 和 isolation: isolate 的组合影响——前者决定“从哪量”，后者决定“能不能量”，缺一不可。 
