與CSS3菜單

Question

我目前在做與菜單項目，並試圖執行一些東西，同樣的菜單下方出現工作：

，現在我已經得到了它類似於this menu，並試圖修改它，但我困惑了它。

這裏是我的菜單截圖它的外觀鍍鉻：

，這是它的外觀在IE8和Firefox：

的問題是我能得到圓角但第一個菜單中顯示的菜單上的光澤和凹凸不會出現在我的菜單中，因爲它在Chrome，IE以及firefox中顯示爲扁平。所以，如何修改以獲得相同的結果菜單，如第一張圖所示。

這裏是我的菜單CSS：

.menu 
{ 
height: 18px; 
margin-left:318px; 
margin-top:10px; 
width:914px; 
border: 1px solid #d6d6d6; 
background: #fff; 
padding: 14px; 
text-align: center; 
-webkit-border-radius: 4px; 
-moz-border-radius: 4px; 
border-radius: 4px; 
background: #1612CE; 
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#1612CE), to(#3B91F1)); 
background: -webkit-linear-gradient(#1612CE, #3B91F1); 
background: -moz-linear-gradient(#1612CE, #3B91F1); 
background: -ms-linear-gradient(#1612CE, #3B91F1); 
background: -o-linear-gradient(#1612CE, #3B91F1); 
background: linear-gradient(#1612CE, #3B91F1); 
behavior: url(css/ie-css3.htc); 
} 

.blue { 
    background : rgb(52,119,210); 
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(52,119,210)), to(rgb(34,98,188))); 
    background : -moz-gradient(linear, left top, left bottom, from(rgb(52,119,210)), to(rgb(34,98,188))); 
    border: 1px solid #2f8893; 

} 

.blue li a 
{ 
    color: #fff; 
    text-shadow: 0 -1px 0 rgba(0,0,0,.40); 

} 


a { 
    text-decoration: none; 
    color: #262626; 
    line-height: 20px; 
} 

ul 
{ 
    margin: 0; 
    padding: 0; 
    z-index: 300; 
    text-align:right; 
} 
li 
{ 
padding: 0 10px; 
    display:inline-block; 
} 
li:first-child { 
    float:left; 
} 

這是我如何顯示它：

<div class="menu blue"> 
    <ul > 
     <li class="active"><a href="">Home</a></li> 
     <li><a href="">About</a></li> 
     <li><a href="">Blog</a></li> 
     <li><a href="">Services</a></li> 
     <li><a href="">Portfolio</a></li> 
     <li><a href="">Contacts</a></li> 
     <li><a href="">Back to Article</a></li> 
     <li><a href="">How it Works?</a></li> 
    </ul> 
    </div> 

Answer 1

嘗試的顏色這種組合：http://jsfiddle.net/TLS3Y/4/

CSS3 Please!，使所有這些CSS3規則那麼容易:)

.menu { 
    border-color: #598FD1 #598FD1 #1A53A2; 
    border-style: solid; 
    border-width: 2px 1px 3px; 
    height: 18px; 
    margin-left: 318px; 
    margin-top: 10px; 
    padding: 14px; 
    text-align: center; 
    width: 914px; 
    background-color: #2A72D8; 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#2A72D8), to(#1A53A2)); 
    background-image: -webkit-linear-gradient(top, #2A72D8, #1A53A2); 
    background-image: -moz-linear-gradient(top, #2A72D8, #1A53A2); 
    background-image:  -ms-linear-gradient(top, #2A72D8, #1A53A2); 
    background-image:  -o-linear-gradient(top, #2A72D8, #1A53A2); 
    background-image:   linear-gradient(top, #2A72D8, #1A53A2); 
    -webkit-box-shadow: inset 0px 0px 9px #2A72D8; 
    -moz-box-shadow: inset 0px 0px 9px #2A72D8; 
      box-shadow: inset 0px 0px 9px #2A72D8; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
      border-radius: 4px; 
    -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; 
    behavior: url(css/ie-css3.htc); 
} 

Answer 2

可以使用箱陰影壓花UL：

div.blue { 
    box-shadow: 2px 2px 2px #888888; 
} 

漸變可以用線性漸變來製作。我喜歡http://gradients.glrzad.com/發電機。

Answer 3

首先，我建議您使用利·貝羅的http://leaverou.github.com/prefixfree/從而節省您不必再添加不同的瀏覽器所有這些前綴的痛苦，使得只有一個線性漸變聲明

第二你沒有使用正確的聲明用於webkit中的線性漸變。應該

-webkit-linear-gradient(rgb(52,119,210),rgb(34,98,188)) 

這是你應該因爲你沒有指定爲您梯度 任何角度使用速記方法，這也是提供FF

background: -moz-linear-gradient(rgb(52,119,210),rgb(34,98,188)); /* Firefox */ 
background: -webkit-linear-gradient(rgb(52,119,210),rgb(34,98,188)); /* Webkit */ 

對於3D-ER的外觀添加框-shadow上嵌入

box-shadow:inset 0 1px 0 #fff; // for a nice thing white line at the top of the menu 

設置您也可以鏈中的box-shadow聲明和具有

box-shadow:inset 0 1px 0 #fff, 0 2px 5px #222 // thing white line at the top and drop shadow