裁剪不同颜色的导航栏（使用 CSS 2.1）答案

【问题标题】：Cut a navigation bar with different colors (with CSS 2.1)裁剪不同颜色的导航栏（使用 CSS 2.1）
【发布时间】：2012-02-25 08:41:26
【问题描述】：

请帮助我使用 CSS2.1 剪切以下导航栏，带有阴影、圆角边框并且在放大/缩小时不会破坏布局：

我已经研究了两天了，但找不到任何在缩放时看起来相同的方法......

编辑：

需要用CSS2.1
左右边框圆角+有阴影（左右对应）
底部也有阴影

【问题讨论】：

你能指出一个这样的切片教程吗？
这里我试过了，但是在我缩放时它不起作用：profsyntax.com/test/7Days

标签： zooming slice navigationbar css

【解决方案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; }

【讨论】：

Box shadow 是 CSS3，但我必须使用 css2.1。

【解决方案2】：

这是一个非常简单的解决方案。你可以只使用css。我使用 jQuery 来评估颜色，但这是一个简单的过程...... 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; }

【讨论】：

哦，不！左右边框是圆角的，按钮下方和左右两侧都有阴影。
如果你想要那些没有 css3 的效果，那么你将不得不使用图像。
是的，我就是这么做的。但我不知道如何在放大/缩小时实现一致的布局