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

Question

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

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

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

<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

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

Horizontal scrolling shadows on top of colored elements

html

css

layout

scroll

shadow