Question

我如何使用 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>

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

EDIT: IT HAS TO BE A CROSS BROWSER SOLUTION, MEANING IT HAS TO WORK WITH MIN IE7 *EDIT: ADDED JQUERY.CORNERS RESOURCE TO JSFIDDLE AND TRIED TO MAKE FIRST LI RENDER WITH CORNER BUT ITS NOT WORKING - PLEASE CAN YOU HELP * - http://jsfiddle.net/c7NyZ/4/

SOLUTION: http://jsfiddle.net/c7NyZ/6 (我毫不怀疑JS Library! )

-================================================================================================================================================ ========================================================================================================================================================

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

http://jsbin.com/avegeb/2" rel = "no follow" >JSBIN

如果你准备用CS3派的话

 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 中加入曲线,则必须使用位置适当的图像或矢量图形库。

取出 < a href=> "http://www.css3pie.com" rel = "no follow" >cs3pie - 整洁!

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

"http://jsfiddle.net/teneff/c7NyZ/2/" rel="nofollow">jsFiddle

<强力>Edit: 最新Firefox、 Opera 和 Chrome 的作品。我使用 Linux, 无法描述 IE

Answer 3

IE9+、Firefox 4+、Chrome、Safari 5+和Opera支持边界-半径财产。

  .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*/
   }

以下是拼写拼写拼写代码:

$(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

在美好的旧时代,众人是艰难的,这是艰难的。

Surround your boxes with 4 divs
Add the correct class to each div (top-left, top-right, bottom-left and bottom-right)
Add an image making a rounded corner on each class
???
Profit!

在你的小提琴上,代码会看起来像这个:http://jsfidle.net/Ralt/c7NyZ/5

这里举了一个真正的例子:http://www.sitepoint.com/examples/jscorners/ four-nested-divs.html 。

您可以在此看到一个真正的教程 : < a href=""http://webcsstips.wordpress.com/2009/07/17/boxes- with wounded-corners/"rel="nofollow">http://webcsstips.wordpress.com/2009/07/17/boxes-with-coured-corners/ 上面有一些不错的链接, 就像圆角图像生成器。

说到这里,我只要现在的CSS3PIE就可以了。

友情链接