最稳妥方案是用mask-image配合linear-gradient实现滚动容器边缘渐隐，需加-webkit前缀并处理Firefox兼容性；不支持时退至pointer-events:none的伪元素方案。
滚动容器的渐变遮罩，本质不是“给滚动条加效果”，而是让容器**可视区域的上下/左右边缘产生视觉渐隐**——防止内容突然被裁切。最稳妥、兼容性最好的方案是用 mask-image 配合 linear-gradient，但必须处理好前缀和 fallback。
用 mask-image 实现纯 CSS 滚动渐隐
这是目前最干净的方案：不新增 DOM 元素、不干扰滚动行为、支持响应式。关键在于用渐变定义“哪些区域该显示，哪些该透明”。
-
mask-image的渐变颜色只能是black（显示）、white（显示）、transparent（隐藏），不能用rgba()；写成to bottom, transparent 0%, black 20px, black calc(100% - 20px), transparent 100%才能控制遮罩高度 - 必须加
-webkit-mask-image前缀，Chrome/Safari 当前仍需它；Firefox 目前完全不支持mask-image的渐变值（2026 年中仍如此） - 父容器背景不能是透明或渐变色，否则遮罩边缘会漏底——此时得退回到伪元素方案
- 示例代码：
scrollable-container { -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 24px, black calc(100% - 24px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, black 24px, black calc(100% - 24px), transparent 100%); }
fallback：用伪元素 + pointer-events: none
当需要兼容 Firefox 或父容器背景复杂时，退回伪元素叠加。但它不是“盖在滚动容器上”，而是盖在它的**父级定位容器**上，否则会随滚动一起动。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 结构必须是：
<div class="outer"><div class="relative-wrapper"> <div class="top-mask"></div> <div class="bottom-mask"></div> <div class="scrollable-container"></div> </div></div> -
.top-mask和.bottom-mask要设pointer-events: none，否则鼠标滚轮在遮罩区域会失效 - 渐变方向写
to top或to bottom比角度更直观；height建议固定（如24px），避免响应式错位 - 示例：
.top-mask { position: absolute; top: 0; left: 0; right: 0; height: 24px; background: linear-gradient(to top, transparent, #fff); pointer-events: none; }
别踩这些坑
很多实现失败，不是语法错，而是逻辑卡点没理清。
立即学习“前端免费学习笔记（深入）”；
- 直接对
.scrollable-container设position: relative，再加伪元素——伪元素会随滚动一起移位，遮罩“飘走” - 在
mask-image里写rgba(0,0,0,0.5)——浏览器直接忽略整条声明，渐变失效 - 用
filter: blur()或backdrop-filter想模拟遮罩——它们不裁剪区域，只做后处理，无法解决裁切生硬问题 - 以为
overflow: hidden加渐变背景就能替代遮罩——那只是盖住溢出部分，滚动时边缘依然突兀
真正难的不是写哪行代码，而是判断当前场景该用 mask-image 还是伪元素：看目标浏览器、看父背景、看是否允许 DOM 变动。选错方案，后面所有调试都是徒劳。
