YeomanYe
12/26/2016 - 2:56 PM

CSS:scrollShadowTips

CSS:scrollShadowTips

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;
    /*
    由linear-gradient和radial-gradient组成
    linear-gradient产生阴影上部
    radial-gradient产生阴影下部
    */
    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;
}