HTML阴影遮罩,css secret 案例 滚动出现的遮罩阴影

Scrolling hints

/**

* Scrolling hints

*/

ul {

display: inline-block;

overflow: auto;

width: 7.2em;

height: 7em;

border: 1px solid silver;

padding: .3em .5em;

list-style: none;

margin-top: 2em;

font: 100 200%/1.6 'Frutiger LT Std', sans-serif;

background: linear-gradient(white 15px, hsla(0,0%,100%,0)) 0 0 / 100% 50px,

radial-gradient(at top, rgba(0,0,0,.2), transparent 70%) 0 0 / 100% 15px,

linear-gradient(to top, white 15px, hsla(0,0%,100%,0)) bottom / 100% 50px,

radial-gradient(at bottom, rgba(0,0,0,.2), transparent 70%) bottom / 100% 15px;

background-repeat: no-repeat;

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

margin-top: 30px;

}

• Ada Catlace
• Alan Purring
• Schrödingcat
• Tim Purrners-Lee
• Webkitty
• Json
• Void
• Neko
• NaN
• Cat5
• Vector

提示：你可以先修改部分代码再运行。