將圓角添加到導航欄CSS

Question

我的網站上有一個導航欄，但我想在其每個端都放圓角。 到目前為止，我的CSS是..

#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;
}

和我的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>

我在每個端都有圓角，分別稱為menu_l.png和menu_r.png。 無法完全弄清楚如何將它們放在導航的任一端。 到目前為止，我的嘗試似乎已被瀏覽器所忽略。 任何人都有最好的方法來實現這一目標？ 我試圖避免表。

干杯

Answer 1

嘗試在#nav的開頭和#nav添加div 。

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

然后針對CSS執行此操作：（假設您的圓角圖片寬度為15px）

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

然后應用圓角圖像。

Answer 2

在某些現代瀏覽器中，執行此操作的簡單方法是添加以下內容：

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

它將處理基於Mozilla和類似Safari（基於Webkit）的瀏覽器。

，IE更復雜。

Answer 3

您可以在第一個鏈接上設置左側背景，並在#nav元素上設置右側背景。

您還可以使用內容選擇器::after ，在#nav上設置左側bg，在#nav上設置右側。