跳到正文
前端设计博物馆
V-08

边缘渐隐

Mask Fade

内容在边缘渐渐淡掉，暗示这一头还能继续滑。

  • 又叫：
  • 渐隐遮罩
  • 边缘淡出
  • 两端渐隐
  • mask fade
  • fade mask
  • gradient mask
  • edge fade
展厅
视觉质感
形态
固定舞台
播放
常驻循环
关键词
纯 CSS / 新 CSS 特性 / 渐变 / 重绘开销 / 可以直接用
V-08形态 固定舞台播放 常驻循环Mask Fade

参数工作台

复制给 AI

随参数实时更新

给这个横向可滚动区域加边缘渐隐：linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent)，同时写 -webkit-mask-image 兼容旧版 Safari，让内容在两端渐渐淡掉、暗示还能继续滑。渐隐长度占容器 12%，两端对称；注意 mask 会让被遮住的部分真的看不见（但仍然可以点击），也不要和 backdrop-filter 用在同一元素上。

什么时候用

  • 横向卡片列表、标签流的边缘，提示后面还有内容
  • 固定高度的滚动区，顶部或底部用渐隐代替一条生硬的分割线
  • 跑马灯、logo 墙的两端，让循环看不出接缝

适用场景：列表 / 滚动 / 页面

推荐取值

渐隐长度
容器宽/高的 8–15%，或 16–32px
写法
mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent)
兼容
同时写 -webkit-mask-image
注意
别和 backdrop-filter 用在同一元素

别搞混

  • 和「overflow: hidden」的区别

    overflow 是硬切，内容到边就断；mask 是淡出，边缘逐渐透明。想暗示「还能滑」用 mask，想干脆截断用 overflow。

  • 和「渐变色盖层」的区别

    盖一层同色渐变只是「看起来像」，一旦底色不是纯色（图片、渐变、深色模式）就露馅；mask 直接改内容的可见性，跟底色无关。

容易踩的坑

  • 渐隐长度要够（约容器宽度的 8–15%），太短看起来像脏边
  • 旧版 Safari 需要 -webkit-mask-image 前缀，写两份最稳
  • mask 会让被遮住的区域真的看不见，但那部分仍然可点击、可聚焦——不要用 mask 当「隐藏」
  • mask 与 backdrop-filter 同时用在同一个元素上，某些 Chrome 版本会渲染异常（毛玻璃会被切断）
  • 纵向滚动区做上下渐隐时，滚到顶部/底部要淡出对应的那侧，否则永远是「下面还有」的错觉
  • 两端用同一条线性渐变对称处理，别只做一边

无障碍降级

边缘渐隐本身是静态的，不需要降级；只有配合滚动的动态提示在 prefers-reduced-motion 下才改成静态可见。

关键词

  • mask-image
  • -webkit-mask-image
  • linear-gradient mask
  • mask-composite
  • edge fade
  • fade mask
  • scroll hint
  • CSS masking

参考

相关展品