CSSのMac OS Xタブスタイル

Question

Mac OS XのCSSのようにタブを作成するのに助けてください。事前に

<div class="tabs"> 
    <div class="tab active"> <img src="" /> <span> General </span> </div> 
    <div class="tab"> <img src="" /> <span> Appearance </span> </div> 
    <div class="tab"> <img src="" /> <span> Bookmarks </span> </div> 
    <div class="tab"> <img src="" /> <span> Tabs </span> </div> 
</div> 

ありがとう！

Answer 1

内側のシャドウには「ボックスシャドウ：挿入」を使用してください。

.tab{ 
    background-color: #D3D3D3; 
    width: 100px; 
    height:50px; 
    display:inline-block; 
    line-height: 50px; 
    text-align:center; 
} 
.tab:hover{ 
    -moz-box-shadow: inset 0 0 10px #000000; 
    -webkit-box-shadow: inset 0 0 10px #000000; 
    box-shadow:   inset 0 0 10px #000000; 
}