jQuery圓角上的第一個和最后一個李

Question

如何使用jquery創建第一個LI的左上角和左下角的圓角以及最后一個LI的右上角和右下角的圓角？

我知道我可以使用border-radius，但這不會是跨瀏覽器的解決方案。

這是我已經開始的： http : //jsfiddle.net/c7NyZ/1/

如果您可以向jsfiddle添加資源並更新它的ID，那就太好了。

HTML：

<div id="new-menu-upper">
<ul id="top-nav">
<li><a href="/t-topnavlink.aspx">menu item 1</a></li>
<li><a href="/t-topnavlink.aspx">menu item 2</a></li>
<li><a href="/t-topnavlink.aspx">menu item 3</a></li>
<li><a href="/t-topnavlink.aspx">menu item 4</a></li>
<li><a href="/t-topnavlink.aspx">menu item 5</a></li>
<li><a href="/t-topnavlink.aspx">menu item 6</a></li>
</ul>
</div>

CSS：

div#new-menu-upper {
    border: 0 solid red;
    height: 40px;
    margin: 0 5px 10px;
    padding-top: 63px;
}
ul#top-nav li {
    background-image: url("http://i47.tinypic.com/21nqxjc.png");
    background-repeat: repeat;
    border-right: 2px solid lightgrey;
    float: left;
    height: 41px;
    width: 156px;
}
ul#top-nav li a {
    color: White;
    display: inline-block;
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    padding-left: 38px;
    padding-top: 12px;
    text-transform: uppercase;
}

編輯：它必須是一個跨瀏覽器解決方案，這意味着它必須與MIN IE7 * 編輯 工作 ：新增JQUERY.CORNERS RESOURCE TO的jsfiddle，並設法使FIRST李帶角落渲染，但其不工作-請你能幫助* - HTTP ：//jsfiddle.net/c7NyZ/4/

解決方案： http : //jsfiddle.net/c7NyZ/6/ （我沒有申請JS庫！）

編輯：第一個李似乎與第二個李合並，你能解決這個問題嗎？ -http://jsfiddle.net/c7NyZ/7/

Answer 1

簡單，只需使用first-child和last-child偽元素

  ul#top-nav li:first-child{
    border-radius : 10px 0px 0px 10px;
  }
  ul#top-nav li:last-child{
    border-radius : 0px 10px 10px 0px;
  }

吉賓

如果您准備使用CSS3 Pie，那么

 ul#top-nav li{behavior: url(PIE.htc);}  
 ul#top-nav li:first-child{
        border-radius : 10px 0px 0px 10px;
 }
 ul#top-nav li:last-child{
      border-radius : 0px 10px 10px 0px;
 }

---

否則，如果要將曲線合並到IE 6,7,8中，則必須使用放置良好的圖像或矢量圖形庫。

結帳css3pie-整潔！

Answer 2

這是我的版本：

ul#top-nav li:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
ul#top-nav li:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

jsFiddle

編輯：適用於最新的Firefox，Opera和Chrome。 我正在使用linux，無法說明IE

Answer 3

IE9 +，Firefox 4 +，Chrome，Safari 5+和Opera中都支持border-radius屬性，這是CSS代碼：

  .first_li{
   border-top-left-radius: 10px;
   border-bottom-left-radius: 10px;
   -moz-border-radius : 10px 0px 0px 10px; /*firefox 3.6 and earlier*/
  }
  .last_li{
   border-top-right-radius: 10px;
   border-bottom-right-radius: 10px;
   -moz-border-radius : 0px 10px 10px 0px;/*firefox 3.6 and earlier*/
   }

這是相應的jquery代碼：

$(function(){ // use any other event handler like click, hover or others
     $('ul#top_nav li:first').addClass('.first_li');
     $('ul#top_nav li:last').addClass('.last_li');
 });

Answer 4

將其用於所有瀏覽器：

ul li:first-child {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
ul li:last-child {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}

Answer 5

在（不是那么）美好的過去，人們很難做到這一點。 這是困難的方法：

• 4格環繞您的盒子
• 向每個div添加正確的類（左上，右上，左下和右下）
• 在每個類上添加一個使圓角變圓的圖像
• ???
• 利潤！

在您的jsfiddle上，代碼如下所示： http : //jsfiddle.net/Ralt/c7NyZ/5/

此處顯示了一個真實的示例： http : //www.sitepoint.com/examples/jscorners/four-nested-divs.html

您將在此處看到一個真正的教程： http : //webcsstips.wordpress.com/2009/07/17/boxes-with-rounded-corners/上面有一些不錯的鏈接，例如圓角圖像生成器。

就是說，我現在只是去CSS3PIE。