如何只在html底部添加阴影,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, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, /* Shadows */

radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;

background: /* Shadow covers */

linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, /* Shadows */

radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 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;

}

• I Show Below Shadow. Go Down Now
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• The end!
• No shadow here. See Above. Go Up