如何在容器溢出时添加阴影但仅在需要时添加阴影？
我的意思是：
>如果内容可以在顶部或底部滚动,则显示阴影以告知用户有更多内容可供scoll使用
>如果没有要滚动的内容,则不会出现阴影
并进一步澄清
>如果容器的内容溢出(即滚动)并且用户位于内容的最顶部,那么页面底部应该有阴影而不是顶部.
>如果用户位于页面底部,则期望顶部应该有阴影
>如果内容没有溢出容器,则不应显示阴影以保持清洁.
我有工作的JavaScript解决方案,但出于性能原因我想要一些纯粹的CSS.
有任何想法吗？
解决方法
我想你在找这样的东西;
参考：LINK
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;
}
<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>
