CSS3小demo之阴影

做一个导航栏：

<style>
    * {
        padding: 0;
        margin: 0;
        list-style: none;
    }
    .wrapper {
        margin: 100px;
    }
    .wrapper .ul-box ul{
        display: inline-block;
        background-color: #f40;
        border-radius: 3px;
        box-shadow: 0px 4px 6px -2px #333;
    }
    .wrapper ul li {
        display: inline-block;
        color: #fff;
        font-size: 20px;
        line-height: 20px;
        padding:0px 20px; 
        margin: 8px 0;
        border-right: 1px dashed #fff;
        text-shadow: 0 1px 1px #333;
        cursor: pointer;
    }
    .wrapper .ul-box ul .last{
        border: 0;
    }
</style>

<div class="wrapper">
    <div class="ul-box">
        <ul>
            <li>
                XXX
            </li>
            <li>
                可爱的女生
            </li>
            <li>
                喜欢美食
            </li>
            <li>
                喜欢骑行
            </li>
            <li>
                喜欢旅游
            </li>
            <li class="last">
                Contact me
            </li>
        </ul>
    </div>