css - 在 CSS 中严格设置带有圆边的分隔符导航样式

Question

我的导航栏看起来像:

   <div id="navbar">
        <ul class="tabnavcenter">
          <li class="active"><a href="#tab1" data-toggle="tab">Test</a></li>
          <li class="aaron"><a href="#tab2" data-toggle="tab">Test</a></li>
          <li><a href="#tab3" data-toggle="tab">Test</a></li>
          <li><a href="#tab4" data-toggle="tab">Test</a></li>
          <li><a href="#tab5" data-toggle="tab">Test</a></li>
        </ul>
   </div>

我的 NavBar CSS 看起来像:

ul.tabnavcenter    {

    background: #fff;
    padding:0px 0px;
    font-size:14px;
    font-weight:bold;
    color:#000;
    overflow:hidden;
    width:957px;
    background-image: -moz-linear-gradient(top, #cacaca, #848484);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#cacaca), to(#848484));
                         }
  ul.tabnavcenter li {
    float:left;
    border-right: #DDDDDD 1px solid;
     list-style-type:none;
                }

    ul.tabnavcenter li.active  {
       background-image: -moz-linear-gradient(top, #cacaca, #4B4B4B);
       background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#cacaca), to(#4B4B4B));

            }


   ul.tabnavcenter li:hover {
       background: #7D7D7D;
       cursor:pointer;
                            }

有没有一种方法可以只使用 CSS 为第一个和最后一个链接添加圆边？ :)

Answer 1

我将您的代码放入 JS Fiddle 中，但不清楚您要如何处理最后一个链接(由于向右渐变，圆形边缘看起来很奇怪)。

http://jsfiddle.net/Kk7vK/

Is there a possible way I could add rounded edges to the first and last link just using CSS?

可以使用 :first-child 和 :last-child 选择第一个/最后一个。浏览器对 first-child 的支持很好 (IE7+)，对 last-child 的支持不太好 (IE9+)。

示例

ul.tabnavcenter > LI:first-child{ /* do something different */ }

CSS 选择器引用:http://www.w3.org/TR/selectors/

可以使用 border-radius(带有特定于供应商的前缀，例如 -moz-border-radius)来实现圆 Angular 边缘。 Internet Explorer 对 border-radius 的支持从 IE9 开始(尽管 polyfills)。