用不同颜色剪切导航栏（使用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; }