渐变消失遮罩-CFANZ编程社区

在这里插入图片描述
mask[4]：属性允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。

<ul>
    <li>Button</li>
    <li>Button</li>
    <li>Button</li>
    <li>Button</li>
    <li>Button</li>
    <li>Button</li>
</ul>

ul {
    width: 300px;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
    mask: linear-gradient(90deg, #000 70%, transparent);
}