CSS shadow for：在可滚动容器之前和之后

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）with perspective：10px但没有实际结果 - 但我认为这是一个起点。



包含此代码的plunker：

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?

Answer 2

好吧，关于滚动问题，解决方案是在Lea Verou会议的视频中。

我可以在这里发布代码，但是人们应该看到视频，它值得拥有

关于使用背景生成的请求阴影，我提供了2个不同的选项，使用多个背景生成。第一个使用圆角，第二个使用圆角。

我做得比请求的更大更暗，所以差异更容易看到。

＆＃13;

＆＃13;

.one {
  width: 200px;
  height: 150px;
  border: solid 1px red;
  background-image: radial-gradient(circle at bottom right, black 0%, white 70%),
    radial-gradient(circle at bottom left, black 0%, white 70%),
    linear-gradient(to top, black 0%, white 100%);
  background-size: 40px 40px, 40px 40px, 100% 40px;
  background-repeat: no-repeat;
  background-position: bottom left, bottom right, bottom left;
  }

.two {
  width: 200px;
  height: 150px;
  left: 220px; top: 10px;
  position: absolute;
  border: solid 1px red;
  background-image: linear-gradient(-45deg, black 0%, white 50%),
    linear-gradient(45deg, black 0%, white 50%),
    linear-gradient(to top, black 0%, white 100%);
  background-size: 40px 40px, 40px 40px, 100% 40px;
  background-repeat: no-repeat;
  background-position: bottom left, bottom right, bottom left;
  }

＆＃13;

<div class="one"></div>
<div class="two"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

这样的事情？

.wrapList:before {
  content: "";
  position: fixed;
  width: 100%;
  margin: 0 auto;
  height: 12px;
  background: linear-gradient(90deg, rgba(0,0,0,0.2), rgba(0,0,0,.5));
  overflow: hidden;
  box-shadow: inset 0 12px 12px -12px rgba(0,0,0,0.5);
}
.wrapList: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.3);
  background: linear-gradient(90deg,  rgba(0,0,0,.3), rgba(0,0,0,0.2));
}

带

 <div class="wrapList">
         <div class="list">
           <div ng-repeat="item in items"> {{item}} </div>
         </div>
 </div>