如何为div元素的顶部和底部同时添加遮罩渐变？

方法一：原生CSS实现（无需插件） #

直接通过CSS的mask属性就能同时定义顶部和底部的渐变遮罩，不用依赖额外插件。给外层容器添加自定义样式：

.gradient-mask-top-bottom {
  /* 清晰的多渐变叠加写法 */
  mask: linear-gradient(to bottom, transparent, black 80%) 0 0 / 100% 50% no-repeat,
        linear-gradient(to bottom, black 20%, transparent) 0 100% / 100% 50% no-repeat;
  /* 兼容webkit内核浏览器 */
  -webkit-mask: linear-gradient(to bottom, transparent, black 80%) 0 0 / 100% 50% no-repeat,
               linear-gradient(to bottom, black 20%, transparent) 0 100% / 100% 50% no-repeat;
}

把这个类加到你的外层div上即可：

<div className="inline-flex flex-nowrap gradient-mask-top-bottom">
  <!-- 内部滚动内容 -->
</div>

方法二：扩展现有gradient-mask插件（适配Tailwind场景） #

如果你想继续用已安装的gradient-mask插件，可通过扩展Tailwind配置添加组合遮罩的自定义类。在tailwind.config.js中添加：

module.exports = {
  plugins: [
    function({ addUtilities }) {
      addUtilities({
        '.gradient-mask-tb-80': {
          mask: 'linear-gradient(to bottom, transparent, black 80%) 0 0 / 100% 50% no-repeat, linear-gradient(to bottom, black 20%, transparent) 0 100% / 100% 50% no-repeat',
          '-webkit-mask': 'linear-gradient(to bottom, transparent, black 80%) 0 0 / 100% 50% no-repeat, linear-gradient(to bottom, black 20%, transparent) 0 100% / 100% 50% no-repeat',
        }
      })
    }
  ]
}

之后直接使用这个自定义类：

<div className="inline-flex flex-nowrap gradient-mask-tb-80">
  <!-- 内部滚动内容 -->
</div>

原理说明 #

CSS的mask属性支持用逗号分隔多个渐变层，每个层可单独设置位置、大小和重复规则，这样就能同时实现顶部透明过渡到底部实色、底部实色过渡到透明的双重遮罩效果。

内容的提问来源于stack exchange，提问作者Conant Quah