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

问题描述

我一直想在表格上添加水平阴影，但当前的解决方案 (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

标签： htmlcsslayoutscrollshadow

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

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

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

问题描述

解决方案

推荐阅读