zooming - 異なる色でナビゲーション バーをカットする (CSS 2.1 を使用)

Question

CSS2.1 を使用して次のナビゲーション バーを切り取るのを手伝ってください。ズームイン/ズームアウトした場合に、影があり、境界線が丸く、レイアウトが損なわれることはありません。

すでに 2 日間取り組んでいますが、ズーム中に同じように見える方法を見つけることができませんでした...

編集：

• 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を使用して色を評価しましたが、これは簡単なプロセスです... 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; }

</ p>