这种滚动阴影如何实现CSS魔术?

本文介绍了这种滚动阴影如何实现CSS魔术?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在2012年发现了这篇臭名昭著的文章.如何创建滚动阴影并仍然可以很好地工作，但是我真的很想了解解决方案，而且我似乎无法在线找到必要的信息.

I found this infamous article from 2012. It details how to create scrolling shadows and still works beautifully but I really want to understand the solution and I can't seem to find the necessary information online.

这是@kizmarh最初创建的最小化代码( blog-post )，并通过以下方式进行了改进@leaverou:

Here is the minified code originally created (blog-post) by @kizmarh and improved by @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>

如果有人能解释一下这种效果是如何实现的?我想我已经掌握了基本要点(如果无法通过背景附件实现进一步的滚动，则会有白色阴影覆盖黑色阴影)，但是我对诸如此类的许多事情感到困惑:

If someone could just explain how this effect is achieved? I think I got the general gist (there are white shadows which are covering the black ones if no further scrolling is possible which is achieved with background-attachments) but I am really confused by a number of things like:

白色阴影如何覆盖黑色阴影，同时保持其背后的内容可见?
如何通过在声明(linear-gradient(...) n% n%)之后放置百分比来放置渐变?
为什么使用背景速记时代码不起作用?
farthest-side at 50% 0到底在做什么?
为什么没有background-color: white;不能正常工作?

How can the white shadows cover the black ones while the content behind them stays visible?
How are gradients placed by putting percentages after the declaration (linear-gradient(...) n% n%)?
Why isn't the code working when you use the background shorthand?
What exactly is farthest-side at 50% 0 doing?
Why doesn't it work without background-color: white;?

推荐答案

内容不在它们后面，内容在上面是合乎逻辑的，因为内容总是在背景之上.在阴影上使用黑色着色与在文本上着色相同，使您认为阴影在上方，但不是.

The content isn't behind them, the content is above which is logical since the content is always above the background. The use of black coloration on the shadow which is the same as text coloratiion make you think that the shadow is above but it's not.

0% 100%表示left 0% top 100%，与left bottom相同，并且由于背景的宽度等于100%(用background-size设置)，因此它也与bottom相同(与全角相关)详细信息:使用百分比值和线性渐变的背景位置)

0% 100% means left 0% top 100% which is the same as left bottom and since the background is having a width equal to 100% (set with background-size) it's also the same as bottom (related for full detail: Using percentage values with background-position on a linear gradient)

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

    /* 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)) bottom;
  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>

您只需要像下面这样正确地编写它即可:

You simply need to correctly write it like below:

.scrollbox {
  overflow: auto;
  width: 200px;
  max-height: 150px;
  background:
    /*Gradient                            position / size  repeat attachment*/

    /* Shadow covers */
    linear-gradient(white 30%, transparent) top   /100% 40px no-repeat local,
    linear-gradient(transparent, white 70%) bottom/100% 40px no-repeat local,

    /* Shadows */
    radial-gradient(farthest-side at 50% 0   , rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) top   /100% 14px no-repeat,
    radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) bottom/100% 14px no-repeat,
    #fff;
}

<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>

请注意我是如何删除scroll的，因为它是默认值，并且您需要为所有渐变指定一个位置，因为速记中的background-size是必需的(相关的).

Note how I removed scroll because it's the default value and you need to specify a position for all the gradient because it's mandatory with background-size in the shorthand (related Issues with "background-position" in "background" shorthand property).

它正在创建一个结束形状，其中心位于50% 0(left 50% top 0或center top)，并且应触摸由background-size定义的背景区域的边缘.对于50% 100%，它是center bottom

it's creating an ending shape where the center is at 50% 0 (left 50% top 0 or center top) and it should touch the edge of its background area defined by the background-size. For 50% 100% it's center bottom

这是一个基本的例子来说明:

Here is a basic example to illustrate:

.box {
  width:200px;
  height:100px;
  background:
    radial-gradient(farthest-side at center top,red 100%,transparent 100%) top/100% 50px no-repeat;
  border:1px solid;
}

<div class="box"></div>

我们的背景尺寸为100% 50px，由于色标为100%，因此我们形成了半椭圆形，红色的曲率正触碰到边缘.

Our background size is 100% 50px and the red curvature is touching the edge since the color stop is 100% creating our half ellipse.

另一个小例子，我们将形状的中心保持在中心:

Another trivial example where we keep the center of the shape at the center:

.box {
  width:200px;
  height:100px;
  background:
    radial-gradient(farthest-side,red 100%,transparent 100%) top/100% 50px no-repeat;
  border:1px solid;
}

<div class="box"></div>

使用具有不同值的代码来更好地了解:

Using our code with different values to better see:

.scrollbox {
  overflow: auto;
  width: 200px;
  max-height: 150px;
  background:
    /* Shadow covers */
    linear-gradient(white 30%, transparent) top   /100% 40px no-repeat local,
    linear-gradient(transparent, white 70%) bottom/100% 40px no-repeat local,

    /* Shadows */
    radial-gradient(farthest-side at top    , red 100%, rgba(0, 0, 0, 0)) top   /100% 14px no-repeat,
    radial-gradient(farthest-side at bottom , red 100%, rgba(0, 0, 0, 0)) bottom/100% 14px no-repeat,
    #fff;
}

<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>

请注意，我如何将center top(50% 0)简化为仅top，对于center bottom

Note how I simplified center top (50% 0) to only top and the same for center bottom

一些相关问题，以获取有关radial-gradient的更多详细信息:

Some related question to get more details around radial-gradient:

如何使用CSS设置径向渐变的动画?

如何在径向渐变中控制椭圆的高度

它在没有以下情况时可以正常工作

It works fine without:

.scrollbox {
  overflow: auto;
  width: 200px;
  max-height: 150px;
  background:
    /* Shadow covers */
    linear-gradient(white 30%, transparent) top   /100% 40px no-repeat local,
    linear-gradient(transparent, white 70%) bottom/100% 40px no-repeat local,

    /* Shadows */
    radial-gradient(farthest-side at top , rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) top/100% 14px no-repeat,
    radial-gradient(farthest-side at bottom , rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) bottom/100% 14px no-repeat;
}

<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>

这里的代码使用了不同的颜色和值，以更好地理解每个渐变以及正在发生的事情.您还可以清楚地注意到文本在上方，不需要白色背景.

Here is the code using different coloration and values to better understand each gradient and what is happening. You can also clearly notice that the text is above and the white background isn't needed.

.scrollbox {
  overflow: auto;
  width: 200px;
  max-height: 150px;
  font-weight:bold;
  font-size:25px;
  background:
    /* Shadow covers */
    linear-gradient(red 30%, white) top       /100% 40px no-repeat local,
    linear-gradient(white, red 70%) bottom/100% 40px no-repeat local,

    /* Shadows */
    radial-gradient(farthest-side at top , yellow 100%, green 100%) top/100% 30px no-repeat,
    radial-gradient(farthest-side at bottom , yellow 100%, green 100%) bottom/100% 30px no-repeat;
}

body {
 background:pink;
}
ul {
  margin:0;
  padding:0;
}

<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>

这是初始代码的优化版本:

And here is an optimized version of your initial code:

.scrollbox {
  overflow: auto;
  width: 200px;
  max-height: 150px;
  background:
    linear-gradient(white 30%, transparent),
    radial-gradient(farthest-side at top, rgba(0, 0, 0, .2), transparent),

    linear-gradient(transparent, white 70%) bottom,
    radial-gradient(farthest-side at bottom, rgba(0, 0, 0, .2), transparent) bottom;
  background-repeat: no-repeat;
  background-size: 100% 40px,100% 14px;
  background-attachment: local, 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>

另一个版本:

.scrollbox {
  overflow: auto;
  width: 200px;
  max-height: 150px;

  --rad:radial-gradient(farthest-side, rgba(0, 0, 0, .2), transparent);
  background:
    linear-gradient(white 30%, transparent),
    var(--rad) 0 -14px,

    linear-gradient(transparent, white 70%) bottom,
    rvar(--rad) 0 calc(100% + 14px);
  background-size: 100% 40px,100% 28px;
  background-attachment: local, scroll;
  background-repeat: no-repeat;
}

<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>

仍然用另一个梯度较小的东西:

Still another one with less gradient:

.scrollbox {
  overflow: auto;
  width: 200px;
  max-height: 150px;

  --rad:radial-gradient(50% 50%, rgba(0, 0, 0, .2), transparent) no-repeat;
  background:
    linear-gradient(white 12px, transparent 40px calc(100% - 40px),white calc(100% - 12px)) local,
    var(--rad) left 0 top    -14px / 100% 28px,
    var(--rad) left 0 bottom -14px / 100% 28px;

}

<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>

最后一个(是最后一个..)，其代码更少:

A final one (yes the last one ..) with less of code:

.scrollbox {
  overflow: auto;
  width: 200px;
  max-height: 150px;

  --rad:radial-gradient(50% 14px, rgba(0, 0, 0, .2), transparent);
  background:
    linear-gradient(white 12px, transparent 40px calc(100% - 40px),white calc(100% - 12px)) local,
    var(--rad) top   /100% 200%,
    var(--rad) bottom/100% 200%;

}

<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>

这篇关于这种滚动阴影如何实现CSS魔术?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！