用不同顏色剪切導航欄（使用CSS 2.1）

Question

請幫助我使用CSS2.1剪切以下導航欄，並帶有陰影，圓形邊框，並且在放大/縮小時不會破壞佈局：

已經兩天我也一直在努力，也找不到任何辦法，這將看起來是一樣的外觀，同時放大...

編輯：

• 需要與CSS2.1

• 權來完成和左邊框四捨五入+有陰影（右向左相對應）

• 有在底部的陰影，以及

Answer 1

應該很簡單。

<div id="navbar"> 
    <a href="news" style="background-color: black;">News</a><a href="business" style="background-color: orange;">Business</a>......<a href="deals" style="background-color: blue;">Deals</a> 
</div> 

CSS：

#navbar > a { 
    padding: 10px; 
    box-shadow: 4px 4px 16px black; 
    color: white; 
} 
#navbar > a:first-child { border-radius: 8px 0px 0px 8px; } 
#navbar > a:last-child { border-radius: 0px 8px 8px 0px; } 

Answer 2

這是一個非常簡單的解決方案。你可以使用只是CSS。我用jQuery來assing的顏色，但它是一個簡單的過程... http://jsfiddle.net/elclanrs/QtLv5/2/

HTML

<ul> 
    <li><a href="#">Option1</a></li> 
    <li><a href="#">Option2</a></li> 
    <li><a href="#">Option3</a></li> 
    <li><a href="#">Option4</a></li> 
    <li><a href="#">Option5</a></li> 
</ul> 

CSS

li { float: left; } 
a { 
    display: block; 
    padding: .5em 1em; 
    text-decoration: none; 
    color: black; 
    font: bold 15px Arial; 
} 

/* If you assign unique ids to your menu items you can do */ 
#item { background: red; }