я нашел эта печально известная статья с 2012 года. В нем подробно рассказывается, как создавать прокручивающиеся тени, и он по-прежнему прекрасно работает, но я действительно хочу понять решение и не могу найти необходимую информацию в Интернете.

Вот минимизированный код, изначально созданный ( Сообщение блога ) @kizmarh и улучшено @leaverou:

.scrollbox {
  overflow: auto;
  width: 200px;
  max-height: 150px;
  background: 
    /* Shadow covers */
    linear-gradient(white 30%, rgba(255, 255, 255, 0)), 
    linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%,

    /* Shadows */
    radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), 
    radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;
  background-repeat: no-repeat;
  background-color: white;
  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
  background-attachment: local, local, scroll, scroll;
}
<div class="scrollbox">
  <ul>
    <li>Ah! Scroll below!</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>1</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>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>The end!</li>
    <li>No shadow there.</li>
  </ul>
</div>

Если бы кто-то мог просто объяснить, как этот эффект достигается? Я думаю, что получил общее представление (есть белые тени, которые покрывают черные, если дальнейшая прокрутка невозможна, что достигается с помощью фоновых вложений), но меня действительно смущает ряд вещей, таких как:

  • Как белые тени могут покрывать черные, в то время как содержимое позади них остается видимым?
  • Как размещаются градиенты, помещая проценты после объявления (linear-gradient(...) n% n%)?
  • Почему код не работает, когда вы используете фоновое сокращение?
  • Что именно farthest-side at 50% 0 делает? Почему это не работает без background-color: white;?
2
leonheess 20 Дек 2019 в 20:43