0

我的导航栏看起来像：

   <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>

我的导航栏 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 将圆角边缘添加到第一个和最后一个链接？:)

4

1 回答 1

1

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

http://jsfiddle.net/Kk7vK/

有没有一种可能的方法可以仅使用 CSS 将圆角边缘添加到第一个和最后一个链接？

可以使用:first-child和选择第一个/最后一个:last-child。浏览器对 的支持很好（IE7+）first-child，对last-child.

例子 

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

CSS 选择器参考：http ://www.w3.org/TR/selectors/

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

于 2012-05-16T03:24:04.787 回答