Javascript jquery第一个和最后一个li上的圆角

如何使用jquery创建第一个LI的左上角和左下角圆角以及最后一个LI的右上角和右下角圆角

我知道我可以使用边界半径，但这不是一个跨浏览器的解决方案

以下是我的开始：

如果您可以向JSFIDLE添加一个资源并更新它的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>

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资源添加到JSFIDLE，并尝试使用CORNER进行第一次LI渲染，但不起作用-请提供帮助*-

解决方案：（我没有应用JS库！）

---

编辑：第一个李似乎与第二个李合并，你能解决这个问题吗？？-

简单，只需使用

第一个子元素

和

最后一个子元素

伪元素

  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中合并曲线，则必须使用位置良好的图像或矢量图形库

---

结帐-它很整洁

简单，只需使用

第一个子元素

和

最后一个子元素

伪元素

  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中合并曲线，则必须使用位置良好的图像或矢量图形库

结帐-它很整洁

这是我的版本：

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

编辑：适用于最新的Firefox、Opera和Chrome浏览器。我正在使用linux，无法了解IE这是我的版本：

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

---

编辑：适用于最新的Firefox、Opera和Chrome浏览器。我使用的是linux，无法说明IE的情况。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');
 });

---

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');
 });

---

对所有浏览器使用此选项：

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

---

对所有浏览器使用此选项：

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

在（不那么）好的旧时代，人们用艰苦的方式来做。这是一条艰难的道路：

• 用4个div包围你的盒子
• 将正确的类添加到每个div（左上、右上、左下和右下）
• 在每个类上添加一个圆角的图像
• 利润

在JSFIDLE上，代码如下所示：

此处显示了一个实际示例：

您将在这里看到一个真正的教程：上面有一些不错的链接，比如圆角图像生成器

这就是说，我现在只会选择CSS3PIE。

在（不太）好的旧时代，人们做得很辛苦。这是一条艰难的道路：

• 用4个div包围你的盒子
• 将正确的类添加到每个div（左上、右上、左下和右下）
• 在每个类上添加一个圆角的图像
• 利润

在JSFIDLE上，代码如下所示：

此处显示了一个实际示例：

您将在这里看到一个真正的教程：上面有一些不错的链接，比如圆角图像生成器

---

这就是说，我现在只想买CSS3PIE。

你可以看看你是不是已经在这里结账了？所选答案提供了一些选项。您可以看看您是否已在此处签出？选定的答案提供了几个选项。您需要添加webkit和IE以及vanila版本（OP特别指出不要使用border radius，因为它还没有跨浏览器）@sp-1986 IE8中圆角的唯一解决方案是使用图形元素ShowEver，border radius在IE9之前不受支持。阅读文章在这里回答问题，我会投票给你，让它得到回答，为你提供更多的代表点：P-你需要添加webkit、IE以及vanila版本（不过OP明确表示不要使用border radius，因为它（尚未）跨浏览器）@sp-1986 IE8中圆角的唯一解决方案是使用图形元素ShowEver，直到IE9才支持边界半径。阅读文章在这里回答问题，我会投票给你并回答，更多代表点为你：P-