如何在列表底部制作渐变叠加以指示更多项目

Question

我试图(仅使用CSS3)一个边缘,可以在容器div的底部,左边,顶部或右边缘,以便它内部的元素列表与它重叠,作为视觉指示器对用户说有更多的项目.见下面的样机.我怎么能在CSS3中做到这一点？(黑匣子设置为overflow: scroll)

使用box-shadowwith inset不起作用,因为背景和阴影需要覆盖内容,但内容仍然需要可点击和滚动.

Answer 1

也可以使用伪元素:http://codepen.io/anon/pen/sghyb

HTML测试

<nav>
  <ul>
    <li>List</li>
     ...
  </ul>
</nav>

CSS测试

nav {
  display:table;
  margin:auto;
  font-size:50px;
  position:relative;
}
nav:after {
  content:' ';
  position:absolute;
  left:0;
  right:17px;
  height:1em;
  top:6.3em;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,0),
    rgba(0,0,0,0.95) 50%
  );
  z-index:1;
}
ul {
  background:#000;
  margin:0;
  padding:0;
  color:silver;
  width:15em;
  height:7.3em;
  overflow:auto;
}
li {
  display:block;
  font-weight:bold;
}

Answer 2

添加一个图层 (div)到容器 div 的position:absolute底部 ( )并具有所需的渐变。bottom:0px; left:0px; right:0px;z-index