Html 如何使嵌入底部阴影或使其成为图像

html

所以我需要像这张图片一样，我不知道如何通过图片或方框阴影嵌入，如果可能的话，如果我使用背景图片作为蓝色阴影，它看起来不好，看起来很粗糙，我认为最好通过方框阴影来做，但是怎么做呢

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

---

根据您的需要更改颜色。

当我将鼠标悬停在每个a标记上时，它采用png（透明）的蓝色阴影背景，但左右两侧非常粗糙，是否有办法做到这一点？我回答了您的问题。这个解决方案对你有效吗？

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

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