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>

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 だけを使用して、最初と最後のリンクに丸みを帯びたエッジを追加する方法はありますか? :)

4

1 に答える 1

1

コードを JS Fiddle に入れましたが、最後のリンクをどのように処理したいかわかりません (右へのグラデーションのため、丸みを帯びたエッジは奇妙に見えます)。

http://jsfiddle.net/Kk7vK/

CSS だけを使用して、最初と最後のリンクに丸みを帯びたエッジを追加する方法はありますか?

:first-childと で先頭/末尾を選択できます:last-child。ブラウザのサポートは では良好 (IE7+) ですがfirst-child、 ではあまり良くありません (IE9+) last-child。

例 

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

CSS セレクタ リファレンス: http://www.w3.org/TR/selectors/

border-radius丸みを帯びたエッジは、 ( などのベンダー固有のプレフィックスを使用して)を使用して実現できます-moz-border-radius。Internet Explorer のサポートは IE9 でborder-radius開始されました (ただし、IE9未満のポリフィルがあります)。

于 2012-05-16T03:24:04.787 に答える