CSS3 子要素に影を利かす

box-shadowテクニック

by tea4two

HTML

<div>
    <ul>
        <li>あああ</li>
        <li>あああ</li>
        <li>あああ</li>
        <li>あああ</li>
        <li>あああ</li>
        <li>あああ</li>
        <li>あああ</li>
        <li>あああ</li>
        <li>あああ</li>
        <li>あああ</li>
        <li>あああ</li>
        <li>あああ</li>
        <li>あああ</li>
       
        </ul>
</div>

CSS

div {
    -webkit-box-shadow: inset 5px 5px 5px -5px rgba(0,0,0,.5);
    box-shadow: inset 5px 5px 5px -5px rgba(0,0,0,.5);
}

ul {
    height: 200px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}