彩色元素顶部的水平滚动阴影答案

【问题标题】：Horizontal scrolling shadows on top of colored elements彩色元素顶部的水平滚动阴影
【发布时间】：2019-08-27 20:58:01
【问题描述】：

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

我正在考虑在顶部添加一个伪元素，但我很难让它像桌子一样宽，并且有另一个包装器来设置阴影的背景渐变。

这是当前的解决方案，以及它如何不适用于具有背景的元素。

<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

【问题讨论】：

标签： html css layout scroll shadow

【解决方案1】：

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

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

【讨论】：