如何获得使用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; 
}