渐变遮罩淡出 Gradient Fade Mask
用 mask 渐变把内容上下边缘裁进雾里，滚动/长内容不再顶到边框
滚动内容第 1 行 · 上下边缘被渐变遮罩淡出
滚动内容第 2 行 · 上下边缘被渐变遮罩淡出
滚动内容第 3 行 · 上下边缘被渐变遮罩淡出
滚动内容第 4 行 · 上下边缘被渐变遮罩淡出
滚动内容第 5 行 · 上下边缘被渐变遮罩淡出
滚动内容第 6 行 · 上下边缘被渐变遮罩淡出
滚动内容第 7 行 · 上下边缘被渐变遮罩淡出
滚动内容第 8 行 · 上下边缘被渐变遮罩淡出
（上下边缘用 mask 渐变淡出，内容像从雾里来）
**渐变遮罩淡出（Gradient Fade Mask）**用 mask-image 的线性渐变把元素的上下（或左右）边缘裁成透明：内容滚到尽头不是硬碰边框，而是渐渐隐进雾里。跑马灯、横向滚动列表、时间轴——凡是“内容会在边缘被裁断”的地方都靠它续命。
什么时候用：无限滚动的横向卡片带、公告跑马灯、边缘贴边的长列表。它和“圆角裁切”的区别：圆角裁的是形状，渐变遮罩裁的是可见度——内容完整存在，只是边缘渐隐。
对 AI 说清楚的三要素：① 用 mask-image 而不是叠加一个渐变白色块（后者底色一变就穿帮）；② 过渡带占高度 20%~28%，两头别太长；③ 注意浏览器前缀（-webkit-mask-image）和可点击性——遮罩不挡事件，露出部分照常交互。
复制即用的提示词片段
滚动区边缘用渐变遮罩淡出（Fade Mask）： mask-image: linear-gradient(180deg, transparent 0%, #000 28%, #000 72%, transparent 100%)，让内容从"雾里"滚入滚出； 遮罩带 20%~28% 过渡带即可，太宽会裁掉有效内容。