用 mask-image 实现渐变边缘遮罩最干净，需配合 mask-repeat: no-repeat、mask-size: 100% 100% 和 mask-type: luminance，用 linear-gradient 定义黑白过渡，外层容器设 overflow: hidden 并应用遮罩，内层滚动容器独立处理溢出。
用 mask-image 实现渐变边缘遮罩
直接用 mask-image 是最干净的方式，它能精准控制遮罩形状和透明度过渡。注意：这不是 background-blend-mode 或 box-shadow 能替代的——后者只影响视觉层叠，不真正“裁剪”内容。
关键点：
-
mask-image必须配合mask-repeat: no-repeat和mask-size: 100% 100%，否则渐变会平铺或拉伸失真 - 推荐用
linear-gradient写法：mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%)—— 这样左右边缘各留出 20% 渐变区 - 遮罩颜色值中，
black表示完全显示，transparent表示完全隐藏；灰阶值（如#888）可做中间透明度，但多数场景用黑白就够了 - 必须设
mask-type: luminance（默认值），否则 alpha 通道行为可能意外（尤其在 Safari 中）
滚动区域需额外处理 overflow 和尺寸约束
图片滚动区域本身要可滚动，但遮罩必须固定在容器视口上，不能随内容滚动。常见错误是把 mask-image 加在滚动容器（如 .scroll-area）上，结果遮罩跟着滚走了。
正确做法：
- 外层容器设
overflow: hidden，并应用mask-image - 内层滚动容器设
overflow-x: auto（或scroll），white-space: nowrap（若子元素是 inline），且width要足够宽容纳所有图片（或用display: flex+flex-wrap: nowrap） - 避免给滚动容器设
mask-image，否则 Safari 下遮罩会失效（已知 WebKit bug） - 如果用
scroll-snap，确保scroll-snap-align设在图片项上，而不是遮罩层
兼容性兜底：Safari 15.4+ 才支持 mask-image 的 CSS gradient
旧版 Safari（linear-gradient 形式的 mask-image，回退为全显或全隐。
安全方案：
- 用
@supports (mask-image: linear-gradient())包裹渐变遮罩规则，再写一层 SVG mask 备用 - SVG mask 示例：
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0"><defs><mask id="fade-edge"><rect width="100%" height="100%" fill="white"></rect><rect x="0" width="10%" height="100%" fill="black"></rect><rect x="90%" width="10%" height="100%" fill="black"></rect></mask></defs></svg>
然后在 CSS 中引用：mask-image: url(#fade-edge) - 不要依赖
-webkit-mask-image单独写——现代 Chrome/Firefox 已支持标准语法，加前缀反而可能触发旧解析逻辑
性能注意：避免在滚动容器上触发重绘
mask-image 本身开销小，但若滚动区域里有大量图片或复杂 DOM，加上遮罩后容易引发合成层切换异常，尤其在移动端。
实操建议：
- 给滚动容器加
will-change: scroll-position（仅当滚动频繁时），但别滥用——它会让浏览器提前创建合成层，吃内存 - 图片统一用
contain或cover缩放，并设object-fit，避免拉伸导致遮罩错位 - 如果滚动区域宽度动态变化（比如响应式），用 JS 监听
resize并重设mask-size—— CSS 无法根据容器自适应渐变范围 - 测试时打开 Chrome DevTools 的 “Rendering > FPS meter”，拖动时看是否掉帧；掉帧明显就说明遮罩+滚动组合触发了非预期重绘
渐变边缘的本质是视觉裁剪，不是装饰效果，所以遮罩位置、尺寸、色彩空间必须严格对齐容器边界——差 1px 都可能导致边缘漏白或黑边。动手前先用纯色背景测遮罩范围，比直接套图更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
