[英]jquery rounded corners on first and last li
How do i create rounded top left and bottom left corners of the first LI and rounded top right and bottom right of the last li using jquery? 如何使用jquery创建第一个LI的左上角和左下角的圆角以及最后一个LI的右上角和右下角的圆角?
I understand that i could use border-radius but that wont be a cross browser solution. 我知道我可以使用border-radius,但这不会是跨浏览器的解决方案。
Here is what i have started: http://jsfiddle.net/c7NyZ/1/ 这是我已经开始的: http : //jsfiddle.net/c7NyZ/1/
If you can add a resource to the jsfiddle and update it id be greatful. 如果您可以向jsfiddle添加资源并更新它的ID,那就太好了。
HTML: 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: 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/ 编辑:它必须是一个跨浏览器解决方案,这意味着它必须与MIN IE7 * 编辑 工作 :新增JQUERY.CORNERS RESOURCE TO的jsfiddle,并设法使FIRST李带角落渲染,但其不工作-请你能帮助* - HTTP ://jsfiddle.net/c7NyZ/4/
SOLUTION: http://jsfiddle.net/c7NyZ/6/ (I DIDNT APPLY THE JS LIBRARY!) 解决方案: http : //jsfiddle.net/c7NyZ/6/ (我没有申请JS库!)
EDIT: The first Li seems to merge with the 2nd li, can you fix this?? 编辑:第一个李似乎与第二个李合并,你能解决这个问题吗? - http://jsfiddle.net/c7NyZ/7/
-http://jsfiddle.net/c7NyZ/7/
Simple, Just use first-child
and last-child
pseudo elements 简单,只需使用
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;
}
If you are up for using css3 pie, then 如果您准备使用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;
}
Otherwise, if you want to incorporate curves in IE 6,7,8 The you must either use well-placed images or vector graphics libraries. 否则,如果要将曲线合并到IE 6,7,8中,则必须使用放置良好的图像或矢量图形库。
This is my version: 这是我的版本:
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;
}
Edit: works on latest Firefox, Opera and Chrome. 编辑:适用于最新的Firefox,Opera和Chrome。 I'm using linux and can't tell about IE
我正在使用linux,无法说明IE
The border-radius property is supported in IE9+, Firefox 4+, Chrome, Safari 5+, and Opera.Here is the css code : 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*/
}
And here is the corressponding jquery code : 这是相应的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');
});
use this for all browsers: 将其用于所有浏览器:
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;
}
In the (not so) good old times, people did it the hard way. 在(不是那么)美好的过去,人们很难做到这一点。 This was the hard way:
这是困难的方法:
On your jsfiddle, the code would look like this: http://jsfiddle.net/Ralt/c7NyZ/5/ 在您的jsfiddle上,代码如下所示: http : //jsfiddle.net/Ralt/c7NyZ/5/
A real example is shown here: http://www.sitepoint.com/examples/jscorners/four-nested-divs.html 此处显示了一个真实的示例: http : //www.sitepoint.com/examples/jscorners/four-nested-divs.html
You will see a real tutorial here: http://webcsstips.wordpress.com/2009/07/17/boxes-with-rounded-corners/ There are some nice links on it, like a rounded corner images generator. 您将在此处看到一个真正的教程: http : //webcsstips.wordpress.com/2009/07/17/boxes-with-rounded-corners/上面有一些不错的链接,例如圆角图像生成器。
That said, I'd just go for CSS3PIE nowadays. 就是说,我现在只是去CSS3PIE。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.