如何在列表底部放置渐变叠加以指示更多项目 [英] How to make a gradient overlay at bottom of list to indicate more items

问题描述

我试图(仅使用CSS3)使边缘可以位于容器div的底部，左侧，顶部或右侧，以使其内部的元素列表相互重叠，例如视觉指示器，指示用户还有更多项目.请参见下面的样机.如何在CSS3中做到这一点?(黑框设置为溢出:滚动)

将 box-shadow 与 inset 一起使用不起作用，因为这是背景，阴影需要覆盖内容，但内容仍需要可单击和滚动./p>

解决方案

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

HTML测试

 < nav>< ul>< li>列表</li>...</ul></nav> 

CSS测试

  nav {显示:表；保证金:自动;font-size:50px;位置:相对；}导航:之后{内容:' ';位置:绝对；左:0;右:17px;高度:1em;最高:6.3em;背景:线性渐变(到底部rgba(0,0,0,0)，rgba(0,0,0,0.95)50％);z-index:1;}ul {背景:#000；保证金:0;填充:0;颜色:银色；宽度:15em;高度:7.3em;溢出:自动;}li {显示:块;font-weight:bold;} 

I'm trying to make (using only CSS3) an edge that can be either on the bottom, left, top, or right edge of a container div, so that the list of elements inside it get overlapped by it, as a visual indicator to the user that there are more items. See mockup below. How can I do this in CSS3? (black box is set to overflow: scroll)

Using box-shadow with inset doesn't work because that's background and the shadows need to overlay the content yet the content still needs to be clickable and scrollable.

解决方案

A pseudo element could be used too : http://codepen.io/anon/pen/sghyb

HTML test

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

CSS test

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

这篇关于如何在列表底部放置渐变叠加以指示更多项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！