Css 绝对元素上的梯度

我想添加一个梯度层到我的滑块两侧

所以我有这个代码：

<div>
    <div id="gradientsx">
    </div>
    <ul class="slider">
        <li>item 1</li>
        [...]
    </ul>
    <div id="gradientdx">
    </div>
</div>

项目1
[...]

.gradientsx有一个渐变背景，他的位置是绝对的。但是，

也必须有一个绝对位置（允许滑动），因此梯度X中的grandient变得不可见。我怎样才能解决这个问题

---

示例如下：

您可以使用

z-index

将阴影div强制放置在项目顶部。但请注意，如果鼠标位于项目顶部，它也可能会阻止鼠标事件。但我不确定这是否是个问题，因为我无法从小提琴上看出滑块会是什么样子

---

其他问题：CSS3有可能达到同样的效果吗？你最好把它作为一个新问题来问。如果我们在评论中这样做，它将变成一个无法阅读的混乱，并且一个新问题将对其他用户更加可见。谢谢。我听从了你的建议：