[英]jquery rounded corners on first and last li
如何使用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/
简单,只需使用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-整洁!
这是我的版本:
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');
});
将其用于所有浏览器:
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;
}
在(不是那么)美好的过去,人们很难做到这一点。 这是困难的方法:
在您的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。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.