0

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

我知道我可以使用border-radius，但这不会是一个跨浏览器的解决方案。

这是我开始的：http: //jsfiddle.net/c7NyZ/1/

如果您可以向 jsfiddle 添加资源并对其进行更新，那就太好了。

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 资源添加到 JSFIDDLE 并尝试使用 CORNER 进行第一个 LI 渲染，但它不起作用 - 请你帮忙 * - http ://jsfiddle.net/c7NyZ/4/

解决方案：http: //jsfiddle.net/c7NyZ/6/（我没有应用 JS 库！）

编辑：第一个李似乎与第二个李合并，你能解决这个问题吗？- http://jsfiddle.net/c7NyZ/7/

4

5 回答 5

2

简单，只需使用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;
  }

JSBIN

如果你愿意使用 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 - 它的整洁！

于 2012-05-23T12:30:03.580 回答
1

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');
 });
于 2012-05-23T12:40:01.060 回答
1

这是我的版本：

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

于 2012-05-23T12:32:08.597 回答
1

将此用于所有浏览器：

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;
}
于 2012-05-23T12:50:23.257 回答
1

在（不是那么）美好的过去，人们以艰难的方式做到了。这是艰难的方式：

  • 用 4 个 div 包围你的盒子
  • 为每个 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。

于 2012-05-23T12:52:23.287 回答