网页布局------导航栏悬浮特效

实现效果：当鼠标指针悬浮在导航栏上会出现内阴影效果

页面结构

    <ul>
        <li>首页</li>
        <li>知识星球</li>
        <li>趣味问答</li>
        <li>奖品</li>
    </ul>

页面样式

*{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul{
            width: 700px;
            height: 66px;
            margin: 30px auto;
            background-color: rgb(166, 234, 155);
        }
        li{
            width: 65px;
            height: 27px;
            padding: 15px 45px;
            float: left;
            margin-left: 10px;
            text-align: center;
            font: 16px/27px "微软雅黑";
            color: #fff;
            box-shadow: 0px 0px 1px 0px #470b12 inset;
        }
        li:hover{
            box-shadow: 0px 0px 20px 0px #470b12 inset;
            transition: box-shadow 1s linear ;
        }

　　设置导航栏，在css中为li添加阴影效果和经过导航栏时的显示效果，当鼠标经过导航栏时将阴影半径放大，通过过度动画的方式实现

　　在使用阴影效果时，必须配合内边距一起使用。让图像和阴影拉开一定的距离，不然图片会将阴影遮挡