如何制作底部阴影或使其成像

Question

HTML

  <div class="menu">
        <a href="">Menu1</a>
        <a href="">Menu2</a>
        <a href="">Menu3</a>
        <a href="">Menu4</a>
        <a href="">Menu5</a>
        <a href="">Menu6</a>
        <a href="">Menu7</a>
    </div>

的CSS：

header div.menu
{
    background: url('img/menu_bg.png') no-repeat;
    height: 42px;
    width: 930px;
}
header div.menu a
{
    font-family: 'Neo_medium';
    text-decoration: none;
    color: #323232;
    display: inline-block;
    height: 42px;
    line-height: 42px;
    padding-left: 15px;
    padding-right: 15px;
}
header div.menu a:hover
{
    /*box-shadow: inset 0 4px 2px 5px #b1defe;*/
        background: url('img/menu_item_bg.png') no-repeat;
}

所以我需要像在这张照片中那样制作它，如果可能的话，我不知道如何通过图片或盒子阴影插图来做，如果我使用背景图片作为蓝色阴影，它不会看起来很好，它看起来粗略，我认为更好地通过盒子阴影但是如何？

Answer 1

.menu
{
color: white;
background-color: @action-btn-color;
background-image: -webkit-linear-gradient(#FDFDFD, #FFFFFF);
background-image: -moz-linear-gradient(#FDFDFD, #FFFFFF);
background-image: -o-linear-gradient(#FDFDFD, #FFFFFF);
background-image: linear-gradient(#FDFDFD, #FFFFFF);
border: solid 1px #B7B7B7;
text-align: center;
padding: 4px;
cursor: default;
}

根据您的需要改变颜色。