如何使嵌入底部陰影或使其圖像

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

enter image description here

所以我需要使它像在這張照片，和我不如果可能的話，我知道如何通過圖片或框陰影插圖來實現它，如果我使用背景圖片作爲藍色陰影，它看起來不太好，它看起來粗糙，我認爲最好通過盒子陰影來實現它，但是，怎麼樣？

來源

2012-12-07 Zecrow

當我將鼠標懸停在每一個標籤上時，它需要png（透明）中的藍色陰影背景，但是左右兩邊如此粗略，是否有必要這麼做？ – Zecrow

我回答你的問題。該解決方案是否適合您？ – user10

.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-07 09:43:29 user10

如何使嵌入底部陰影或使其圖像

回答

相關問題