嗨,当我写作时,我在导航栏上圆角时遇到了麻烦 -
border-radius: 15px;
它环绕了所有角落,<a>
但我只想圆形,<li>
所以只有整个工具栏的边距。
这是一个小提琴。
谢谢
编辑
只希望 home 和 contact 被四舍五入
这也有效:
ul#list-nav li {
border:2px solid blue;
float:left;
overflow:hidden;
}
li.first{
border-top-left-radius:15px;
border-bottom-left-radius:15px;
}
li.last{
border-top-right-radius:15px;
border-bottom-right-radius:15px;
}
添加两个新类;一个圆左角和一个圆右角,并将它们分别应用于第一个和最后一个元素。
.round_left {
border-radius: 15px 0 0 15px;
}
.round_right {
border-radius: 0 15px 15px 0;
}
<ul id="list-nav">
<li><a href="#" class="round_left">HOME</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">THE WAY WE WORK</a></li>
<li><a href="#" class="round_right">CONTACT</a></li>
</ul>
链接更新 - http://jsfiddle.net/HYhBe/24/
ul#list-nav li -> 浮动:左 & 溢出:隐藏;
您可以删除显示内联。li 是块级元素。
ul#list-nav li {
border-radius: 15px;
float:left;
overflow:hidden;
}
-- 对于更新的问题 --
从 'ul#list-nav li a' 中删除边框半径属性并添加到您的 CSS 文件中:
ul#list-nav li:first-child a{ border-radius: 15px 0 0 15px;}
ul#list-nav li:last-child a{ border-radius: 0 15px 15px 0;}