0

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で作ったほうがいいと思いますが、どうすればいいですか？

4

1 に答える 1

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

必要に応じて色を変更します。

于 2012-12-07T09:43:29.603 に答える