- 下拉框顶部阴影提示:
效果图:
DOM结构:
<ul class="scrollNote">
<li>not-allowed</li>
<li>ew-resize</li>
<li>ns-resize</li>
<li>zoom-in</li>
<li>zoom-out</li>
<li>none</li>
</ul>
我们可以利用这种阴影的形式来提示用户,列表还有更多的内容。当在最上层时,没有阴影,随着下拉条向下滑动阴影逐渐加深,然后颜色持续不变。
为了实现这种效果,我们可以在列表顶部设置一个圆弧状的背景,为由淡灰色到透明色的渐变,CSS代码如下:
.scrollNote{
height:200px;
overflow: auto;
width: 300px;
text-a