[英]CSS3 Firefox Border Radius Clip
我不确定为什么Firefox浏览器在右上角添加pixellete边框半径。 如果有人在我所附的图片中注意到它。
这仅在Firefox浏览器中发生。 有办法解决吗?
HTML:
<nav class=""id="menusystem">
<ul><li class="active"><span><i class="fa fa-building-o"></i> Home</span></li>
<li><span><i class="fa fa-calendar-o"></i> Book Now</span></li>
<li><span><i class="fa fa-male"></i> Service Prices</span></li>
<li><span><i class="fa fa-th"></i> Product Prices</span></li>
<li><span><i class="fa fa-thumbs-o-up"></i> Our Testimonials</span></li>
<li><span><i class="fa fa-group"></i> Our Events</span></li>
<li><span><i class="fa fa-envelope-o"></i> Contact Us</span></li>
</ul>
</nav>
的CSS
nav {
height:50px;
box-sizing: border-box;
}
nav > ul {
padding:0;
margin:0;
}
nav > ul > li {
display: block;
float: left;
height: 100%;
line-height: 50px;
text-align: center;
width: 144.429px;
background-color: rgb(128, 0, 128);
border-color: rgb(255, 167, 252);
color: rgb(255, 255, 255);
}
nav > ul > li:first-child {
border-bottom-left-radius: 25px;
border-top-left-radius: 25px;
}
nav > ul > li:last-child {
border-bottom-right-radius: 25px;
border-top-right-radius: 25px;
}
您可以使用此代码
nav { height: 50px; box-sizing: border-box; margin: 0 auto; width: 1012px; } nav > ul { padding:0; margin:0; } nav > ul > li { display: block; float: left; height: 100%; line-height: 50px; text-align: center; width: 144.429px; background-color: rgb(128, 0, 128); border-color: rgb(255, 167, 252); color: rgb(255, 255, 255); } nav > ul > li:first-child { border-bottom-left-radius: 25px; border-top-left-radius: 25px; } nav > ul > li:last-child { border-bottom-right-radius: 25px; border-top-right-radius: 25px; }
<nav class=""id="menusystem"> <ul><li class="active"><span><i class="fa fa-building-o"></i> Home</span></li> <li><span><i class="fa fa-calendar-o"></i> Book Now</span></li> <li><span><i class="fa fa-male"></i> Service Prices</span></li> <li><span><i class="fa fa-th"></i> Product Prices</span></li> <li><span><i class="fa fa-thumbs-o-up"></i> Our Testimonials</span></li> <li><span><i class="fa fa-group"></i> Our Events</span></li> <li><span><i class="fa fa-envelope-o"></i> Contact Us</span></li> </ul> </nav>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.