다른 색상의 탐색 모음 자르기 (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를 사용할 수 있습니다. 나는 색상을 assing에 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; }