html - :before and :after on a scrollable container 的 CSS 阴影

Question

我有一个可滚动的容器。我想在容器的开头添加一个插入阴影，并在容器底部的相反方向添加另一个插入阴影。附件是我所拥有的与我想要实现的目标的图片。

这是我试图在顶部附加的阴影，在底部附加一个相反的阴影。请注意，左侧和右侧稍微褪色。

阴影的CSS:

.list { 
  height: 100px;
  overflow: auto;
  position: relative;
}
.list:before {
  content: "";
  position: absolute;
  width: 100%;
  margin: 0 auto;
  height: 12px;
  border: 0;
  box-shadow: inset 0 12px 12px -12px rgba(0,0,0,0.5);
}
.list:after {
  content: "";
  position: absolute;
  width: 100%;
  margin: 0 auto;
  height: 12px;
  border: 0;
  box-shadow: inset 0 -12px 12px -12px rgba(0,0,0,0.5);
  bottom: 0;
}

我有两个问题:

1. 当我滚动时，阴影会移动，我怎样才能将它们保持在原位？
   • 我尝试了固定位置，但它们不限于容器。
2. 如何实现左右阴影的轻微淡化？
   • 我尝试了转换:rotateX(1deg)rotateY(0deg)rotateZ(0deg)和perspective:10px，但没有真正的结果 - 但我认为这是一个起点。

一个包含以下代码的骗子:

http://plnkr.co/edit/YREOxLXUfN7xCUQDwc77?p=preview

Answer 1

您需要添加一个容器 <div>为了达成这个。像这样的事情:

.list-container {
  height: 100px;
  position: relative;
}
.list-container:before {
  display:block;
  content: "";
  position: absolute;
  width: 100%;
  margin: 0 auto;
  height: 12px;
  border: 0;
  box-shadow: inset 0 12px 12px -12px rgba(0,0,0,0.5);
}
.list-container:after {
  display:block;
  content: "";
  position: absolute;
  width: 100%;
  margin: 0 auto;
  height: 12px;
  border: 0;
  box-shadow: inset 0 -12px 12px -12px rgba(0,0,0,0.5);
  bottom: 0;
}
.list { 
  height: 100px;
  overflow: auto;
}

<div class="list-container">
  <div class="list">
    <div> {{item}} </div>
    <div> {{item}} </div>
    <div> {{item}} </div>
    <div> {{item}} </div>
    <div> {{item}} </div>
    <div> {{item}} </div>
    <div> {{item}} </div>
    <div> {{item}} </div>
    <div> {{item}} </div>
    <div> {{item}} </div>
    <div> {{item}} </div>
    <div> {{item}} </div>
    <div> {{item}} </div>
  </div>
</div>

至于你想要的轻微褪色，请看这里:Taper/fade CSS box shadow?