如何獲得使用CSS樣式的Google菜單按鈕

Question

通過查看Google實現一個非常整齊優雅的選項卡系統以瀏覽其Web服務的方式，給我留下了深刻的印象。以下是來自Google日曆的圖片。

我認爲這可以使用純CSS來實現。例如，假設我有這樣的菜單;

<div class="menu"> 
    <div class="item">item1</div> 
    <div class="item">item2</div> 
    <div class="item">item3</div> 
    <div class="item">item4</div> 
</div> 

如何使用CSS（帶/不帶圖像）實現類似的外觀。

Answer 1

您可以使用開發者工具（瀏覽器/ IE/Firefox中的Firebug），以檢查網頁，看看他們是怎麼做的。

我一開始你出去了的jsfiddle簡單地複製了從那些特定的按鈕的代碼，並抓住了CSS規則。很明顯，我錯過了幾個，因爲它看起來不完全一樣，但是當你添加更多的規則時，你可以看到他們正在做什麼來實現這個結果。

您可以直接從Chrome右側的樣式選項卡複製整個CSS規則。

http://jsfiddle.net/XLd3R/

.goog-inline-block { 
    position: relative; 
    display: -moz-inline-box; 
    display: inline-block; 
} 
.trans-strip { 
    background: -webkit-linear-gradient(right, rgba(255, 255, 255, 1.0), rgba(255, 255, 255, .5)); 
    background: -moz-linear-gradient(right, rgba(255, 255, 255, 1.0), rgba(255, 255, 255, .5)); 
} 
.button-strip { 
    white-space: nowrap; 
} 
.goog-imageless-button-collapse-right { 
    border-bottom-right-radius: 0; 
    border-top-right-radius: 0; 
    margin-right: -1px; 
    -webkit-border-bottom-right-radius: 0; 
    -webkit-border-top-right-radius: 0; 
    -moz-border-radius-bottomright: 0; 
    -moz-border-radius-topright: 0; 
} 
.goog-imageless-button, .navbuttonouter { 
    background: #f5f5f5; 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#f1f1f1)); 
    background-image: -webkit-linear-gradient(top, #f5f5f5, #f1f1f1); 
    background-image: -moz-linear-gradient(top, #f5f5f5, #f1f1f1); 
    background-image: -ms-linear-gradient(top, #f5f5f5, #f1f1f1); 
    background-image: -o-linear-gradient(top, #f5f5f5, #f1f1f1); 
    background-image: linear-gradient(top, #f5f5f5, #f1f1f1); 
    border: 1px solid #dcdcdc; 
    border: 1px solid rgba(0, 0, 0, 0.1); 
    border-radius: 2px; 
    color: #444; 
    cursor: pointer; 
    font-size: 11px; 
    font-weight: bold; 
    height: 27px; 
    line-height: 27px; 
    min-width: 54px; 
    outline: none; 
    padding: 0 8px; 
    text-align: center; 
    transition: all .218s; 
    -moz-border-radius: 2px; 
    -moz-transition: all .218s; 
    -moz-user-select: none; 
    -o-transition: all .218s; 
    -webkit-border-radius: 2px; 
    -webkit-transition: all .218s; 
    -webkit-user-select: none; 
} 
.goog-imageless-button, .navbuttonouter { 
    color: #444; 
    cursor: pointer; 
    font-size: 11px; 
    font-weight: bold; 
    line-height: 27px; 
    text-align: center; 
}