私は、現在のメニューでプロジェクトをやって、同じメニューは以下現れているものを実装しようとしています

Question

CSS3メニューでの作業：this menuに類似し、しようとしている

をそして今、私が持っていますそれを変更するが、私はそれにこだわっている。ここで

は、それがクロムでどのように見えるか、私のメニューのスクリーンショットです：

そしてこれはIE8とFirefoxでどのように見えるかです：

問題は、私はにできる午前です丸みを帯びた角を取得しますが、最初のメニューに表示されるメニュー上の光沢とバンプは、クロム、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

まず私はちょうど1本の直線勾配宣言

セカンドをあなたに別のブラウザのすべてのそれらのプレフィックスを追加することの痛みを保存しますリー・ベルーの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ボックスを追加見えますはめ込み

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

に設定されます。また、ボックスシャドウの宣言をチェーンと

を持つことができます-shadow

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