html - 如何制作嵌入的底部阴影或使其图像

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;
}

所以我需要像这张图片一样，如果可能的话，我不知道如何通过图片或box-shadow inset来做到这一点，如果我使用背景图片作为蓝色阴影，它看起来并不好，它看起来很粗略，我认为最好通过 box-shadow 制作它，但是如何？

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;
}

根据您的需要更改颜色。