Hinzufügen von abgerundeten Ecken zu einer Navigationsleiste CSS

Question

Ich habe eine Leiste auf meiner Website, aber ich möchte abgerundete Ecken an jedem Ende davon platzieren. Bisher meine CSS dafür ist ..

#nav { 
left:40px; 
position:relative; 
top:140px; 
} 
#nav a { 
background-image:url(../images/menu.png); 
background-repeat:no-repeat; 
color:#FFFFFF; 
display:inline; 
float:left; 
font-family:Arial,Helvetica,sans-serif; 
font-size:17px; 
font-weight:bolder; 
height:44px; 
padding-top:12px; 
text-align:center; 
text-decoration:none; 
width:134px; 
} 
#nav a:hover { 
background-image:url(../images/menu_ro.png); 
background-repeat:no-repeat; 
} 

und mein HTML ..

<div id="nav"> 
<a href="">Home</a> 
<a href="">Food</a> 
<a href=""</a> 
<a href=""</a> 
<a href=""</a> 
<a href=""></a> 
<a href=""</a> 
</div> 

I Ecken abgerundete an jedem Ende genannt menu_l.png und menu_r.png zu setzen. Ich kann mir nicht vorstellen, wie ich diese an jedes Ende des Navs setzen soll. Meine bisherigen Versuche scheinen von Browsern ignoriert zu werden. Hat jemand eine beste Methode, dies zu erreichen? Ich versuche, Tische zu vermeiden.

Prost

Answer 1

Versuchen Sie, eine div am Anfang von #nav und am Ende hinzuzufügen.

<div id="nav"> 
    <div id="nav-left"></div> 
    //anchor tags 
    <div id="nav-right"></div> 
</div> 

dann tun dies für CSS: (Ihre abgerundete Ecke Bild unter der Annahme 15px breit)

#nav { 
    padding: 0 15px; 
} 
#nav-left, #nav-right { 
    float: left; 
    height: 15px; 
    width: 15px; 
} 

Dann abgerundete Ecke Bild anwenden.

Answer 2

Der einfache Weg, dies in einigen modernen Browsern zu tun ist, wie etwas hinzufügen:

-moz-border-radius: 8px; -webkit-border-radius: 8px;

die mozilla-basierte und Safari-like (Webkit-basierten) Browser behandeln .

Leider ist IE komplizierter.

Answer 3

Sie können den linken Hintergrund auf dem ersten Link und den rechten Hintergrund auf dem Element #nav festlegen.

Sie können auch die linke bg auf #nav und die rechte auf #nav mithilfe der Inhaltsauswahl ::after festlegen.