html阴影向上,HTML – 纯css滚动阴影

对于文本也会发生这种情况,但您无法看到它,因为它们具有相同的颜色.一个解决方案是：儿童的z-index低于父母的z-index.为此,您需要另外两件事：

>孩子和父母的静态位置

> .scrollbox的透明背景

解

.scrollbox li * {

z-index:0;

position:relative;

}

.scrollbox {

z-index:1;

position:relative;

background-color:transparent;

}

/**

* Scrolling shadows by @kizmarh and @leaverou

* Only works in browsers supporting background-attachment: local; & CSS gradients

* Degrades gracefully

*/

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: transparent;

background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;

/* Opera doesn't support this in the shorthand */

background-attachment: local, local, scroll, scroll;

z-index:1;

position:relative;

}

.scrollbox li * {

z-index:0;

position:relative;

}

CSS-only shadow-scrolling effect.

• Ah! Scroll below!
• Button
• Button
• Button
• Button
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• The end!
• No shadow there.

剩下的唯一问题是你需要一个坚实的背景颜色才能工作.

编辑：

子项的z-index需要低于父项的z-index,但如果你使用负z-index,就像我建议的那样,点击和悬停等事件就会停止工作.我正确地更改了代码.