css - 如何在列表底部制作渐变叠加以指示更多元素

Question

我正在尝试(仅使用 CSS3)制作一个边缘，该边缘可以位于容器 div 的底部、左侧、顶部或右侧边缘，以便其中的元素列表与它重叠，如向用户显示还有更多元素的视觉指示器。请参阅下面的模型。我怎样才能在 CSS3 中做到这一点？ (黑框设置为overflow: scroll)

将 box-shadow 与 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;
}