html - 彩色元素顶部的水平滚动阴影

Question

我一直想在表格上添加水平阴影，但当前的解决方案 (Lea Verou) 在 wrapper 上使用背景渐变并且表格上的行具有背景颜色，因此效果消失了。

我想在顶部添加一个伪元素，但我很难让它和表格一样宽，并且有另一个包装器来设置阴影的背景渐变。

这是当前的解决方案，以及它如何不能很好地处理带有背景的元素。

<div class="scrollbox">
    <ul>
        <li>Scroll right</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>The end!</li>
        <li>No shadow there.</li>
    </ul>
</div>

.scrollbox {
    overflow: auto;
    max-width: 400px;
    max-height: 200px;
    margin: 50px auto;
    ul {
      max-width: 200%;
    }
    li {
      display: table-cell;
      padding: 1em;
      border: 1px solid #bebebe
    }
    li:nth-child(odd) {
    color: #fff;
    background-color: rebeccapurple;
  }

  background-image: 
    linear-gradient(to right, white, white),
    linear-gradient(to right, white, white),

    linear-gradient(to right, rgba(0,0,0,.25), rgba(255,255,255,0)),
    linear-gradient(to left, rgba(0,0,0,.25), rgba(255,255,255,0));   
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-color: white;
    background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100%;
    background-attachment: local, local, scroll, scroll;
}

https://codepen.io/ramiro-ruiz/pen/KKPmoaV

Answer 1

我通过使用不透明度 rgba(0,0,0,.1) 的颜色找到了一个简单的解决方案我让包装器背景渐变通过并保持阴影在顶部的错觉。

工作示例:https://codepen.io/ramiro-ruiz/pen/YzKVOGK