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/

是否有可能将圆边添加到第一个和最后一个链接只使用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）来实现圆角边缘。 IE {1}}的Internet Explorer支持从IE9开始（虽然{＆lt; IE9}有polyfills。

在CSS中严格定义具有圆边的分隔符导航

1 个答案: