大佬教程收集整理的这篇文章主要介绍了css – 如何在滚动时添加顶部和底部阴影,但仅在需要时添加？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我的意思是：
>如果内容可以在顶部或底部滚动,则显示阴影以告知用户有更多内容可供scoll使用
>如果没有要滚动的内容,则不会出现阴影
并进一步澄清
>如果容器的内容溢出(即滚动)并且用户位于内容的最顶部,那么页面底部应该有阴影而不是顶部.
>如果用户位于页面底部,则期望顶部应该有阴影
>如果内容没有溢出容器,则不应显示阴影以保持清洁.
我有工作的JavaScript解决方案,但出于性能原因我想要一些纯粹的CSs.
有任何想法吗？
html {
BACkground: white;
font: 120% sans-serif;
}
.scrollbox {
overflow: auto;
width: 200px;
max-height: 200px;
margin: 50px auto;
BACkground: /* Shadow covers */
linear-gradient(white 30%,rgba(255,255,0)),linear-gradient(rgba(255,0),white 70%) 0 100%,/* Shadows */
radial-gradient(50% 0,farthest-side,rgba(0,.2),radial-gradient(50% 100%,0)) 0 100%;
BACkground: /* Shadow covers */
linear-gradient(white 30%,/* Shadows */
radial-gradient(farthest-side at 50% 0,radial-gradient(farthest-side at 50% 100%,0)) 0 100%;
BACkground-repeat: no-repeat;
BACkground-color: white;
BACkground-size: 100% 40px,100% 40px,100% 14px,100% 14px;
/* Opera doesn't support this in the shorthand */
BACkground-attachment: local,local,scroll,scroll;
}@H_801_24@
<div class="scrollbox">
<ul>
<li>I Show Below Shadow. Go Down Now</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>The end!</li>
<li>No shadow here. See Above. Go Up</li>
</ul>
</div>@H_801_24@
以上是大佬教程为你收集整理的css – 如何在滚动时添加顶部和底部阴影,但仅在需要时添加？全部内容，希望文章能够帮你解决css – 如何在滚动时添加顶部和底部阴影,但仅在需要时添加？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。