的樣式分隔導航圓邊stricly在CSS

我的導航欄的樣子：的樣式分隔導航圓邊stricly在CSS

<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？ :)

來源

2012-05-16 Elias7

不要忘了其他瀏覽器，當你做漸變：http://css3please.com/#box_gradient – Sampson

我把你的代碼放入一個JS小提琴，但它不是很明顯你想如何處理最後一個鏈接（因爲右邊的漸變，圓形的邊看起來很奇怪）。

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（與供應商特定的前綴（ES）如-moz-border-radius）來實現。 Internet Explorer對border-radius的支持從IE9開始（儘管對於< IE9有polyfills）。

來源

2012-05-16 03:24:04

蒂姆，這是正確的？ ul.tabnavcenter li：第一個孩子圓角*/ -moz-border-radius-topleft：10px; -moz-border-radius-bottomleft：10px; -webkit-border-top-left-radius：10px; -webkit-border-bottom-left-radius：10px; } – Elias7

以下是一個示例：http://jsfiddle.net/Kk7vK/1/。由於漸變應用於容器元素，因此您需要在其中應用border-radius（而不是在LI上）。在這種情況下，您可以不使用第一個孩子選擇器。 –

謝謝Tim！順便說一句，你不會碰巧知道一個更漂亮/更好的方式來顯示鏈接之間的小空白，你會？：P – Elias7

的樣式分隔導航圓邊stricly在CSS

回答

相關問題