border-radius選項卡看起來像Thunderbird選項卡

Question

有誰知道如何開發thunderbird郵件選項卡（版本15）？看起來不錯，我真的不能在我的應用程序中做同樣的事情。 檢查此屏幕拍攝：http://s7.postimage.org/ocvxg9ooq/thunder.jpg

Answer 1

是的，我以前做過這樣的事情 - 檢查出來http://dabblet.com/gist/3166401（非常好看在IE9以及）

而且我已經做了現在快速的版本有多個選項卡：http://dabblet.com/gist/3608293/（僅適用於CSS）

HTML：

<div id='tabs' class='tabs'> 
    <input type='radio' name='tab' id='tab1' checked> 
    <label for='tab1'><h5>Inbox</h5></label> 
    <section id='inbox'> 
     <h6>You have <a href='#'>1 new message</a></h6> 
     <a href='#'>See all messages</a> 
    </section> 
    <input type='radio' name='tab' id='tab2'> 
    <label for='tab2'><h5>Add-ons Manager</h5></label> 
    <section id='addons'> 
     <h6>Add-ons list</h6> 
     <ul> 
      <li>bammm bammm 
     </ul> 
    </section> 
    <input type='radio' name='tab' id='tab3'> 
    <label for='tab3'><h5>Calendar</h5></label> 
    <section id='addons'> 
     <h6>Scheduled</h6> 
     <ul> 
      <li>Tuesday, September the 4th... 
     </ul> 
    </section> 
    <input type='radio' name='tab' id='tab4'> 
    <label for='tab4'><h5>Chat</h5></label> 
    <section id='addons'> 
     <h6>Something here as well</h6> 
     <div>something more</div> 
    </section> 
</div> 

CSS：

html { font: 90% Helvetica, sans-serif; } 
.tabs { 
    overflow: hidden; 
    position: relative; 
    height: 26.5em; 
    margin: 7em 0 0; 
} 
.tabs input[type=radio] { display: none; } 
.tabs label, .tabs section { position: absolute; } 
.tabs label { 
    z-index: 2; 
    top: 0; left: 1.5em; 
    width: 9em; 
    height: 2em; 
    background: plum; 
    background: linear-gradient(lightcyan, plum); 
    text-align: center; 
    cursor: pointer; 
} 
.tabs h5 { 
    position: relative; 
    margin: 0; 
    height: 2em; 
    font: 1em/2 Helvetica, sans-serif; 
    text-shadow: 0 1px 0 lemonchiffon; 
} 
.tabs label:nth-of-type(2) { left: 12em; } 
.tabs label:nth-of-type(3) { left: 22.5em; } 
.tabs label:nth-of-type(4) { left: 33em; } 
.tabs label:before, .tabs label:after { 
    position: absolute; 
    top: 0; bottom: 0; 
    width: 1em; 
    background: plum; 
    background: linear-gradient(lightcyan, plum); 
    content: ''; 
} 
.tabs label:before { 
    left: -.65em; 
    border-radius: .4em 0 0 0; 
    transform: skewX(-15deg); 
} 
.tabs label:after { 
    right: -.65em; 
    border-radius: 0 .4em 0 0; 
    transform: skewX(15deg); 
} 
.tabs h5:before, .tabs h5:after { 
    position: absolute; 
    bottom: -1px; 
    height: .65em; 
    width: .65em; 
    content: ''; 
} 
.tabs h5:before { 
    left: -1.4em; 
    transform: skewX(-15deg); 
    background: radial-gradient(top left, 
       transparent 70.71%, plum 70.71%); 
} 
.tabs h5:after { 
    right: -1.4em; 
    transform: skewX(15deg); 
    background: radial-gradient(top right, 
       transparent 70.71%, plum 70.71%); 
} 
.tabs section { 
    display: none; 
    z-index: 6; 
    padding: 1em; 
    border-top: solid 1px whitesmoke; 
    margin-top: -1px; 
    top: 2em; right: 0; bottom: 0; left: 0; 
    background: linear-gradient(whitesmoke, gainsboro) 
} 
.tabs input[type=radio]:checked + label, 
.tabs input[type=radio]:checked + label:before, 
.tabs input[type=radio]:checked + label:after { 
    z-index: 5; 
    background: whitesmoke; 
    background: linear-gradient(gainsboro, whitesmoke); 
} 

.tabs input[type=radio]:checked + label:before, 
.tabs input[type=radio]:checked + label:after { 
    background-position: 0 -1px; 
} 
.tabs input[type=radio]:checked + label h5:before { 
    background: radial-gradient(top left, 
       transparent 70.71%, whitesmoke 70.71%); 
} 
.tabs input[type=radio]:checked + label h5:after { 
    background: radial-gradient(top right, 
       transparent 70.71%, whitesmoke 70.71%); 
} 
.tabs input[type=radio]:checked + label + section { display: block; } 

Answer 2

它可以用css :before和:after僞元素完成。看看jsfiddle例如

的Html

<ul class="tabrow"> 
    <li><a href="#">Lorem</a></li> 
    <li><a href="#">Ipsum</a></li> 
    <li class="selected"><a href="#">Sit amet</a></li> 
    <li><a href="#">Consectetur adipisicing</a></li> 
</ul> 

的CSS

.tabrow { 
     text-align: center; 
     list-style: none; 
     margin: 0 20px; 
     padding: 0; 
     line-height: 24px; 
     height: 26px; 
     overflow: hidden; 
     font-size: 12px; 
     font-family: verdana; 
     position: relative; 
    } 
    .tabrow li { 
     border: 1px solid #AAA; 
     background: #D1D1D1; 
     background: -o-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%); 
     background: -ms-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%); 
     background: -moz-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%); 
     background: -webkit-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%); 
     background: linear-gradient(top, #ECECEC 50%, #D1D1D1 100%); 
     display: inline-block; 
     position: relative; 
     z-index: 0; 
     border-top-left-radius: 6px; 
     border-top-right-radius: 6px; 
     box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF; 
     text-shadow: 0 1px #FFF; 
     margin: 0 -5px; 
     padding: 0 20px; 
    } 
    .tabrow a { 
      color: #555; 
      text-decoration: none; 
    } 
    .tabrow li.selected { 
     background: #FFF; 
     color: #333; 
     z-index: 2; 
     border-bottom-color: #FFF; 
    } 
    .tabrow:before { 
     position: absolute; 
     content: " "; 
     width: 100%; 
     bottom: 0; 
     left: 0; 
     border-bottom: 1px solid #AAA; 
     z-index: 1; 
    } 
    .tabrow li:before, 
    .tabrow li:after { 
     border: 1px solid #AAA; 
     position: absolute; 
     bottom: -1px; 
     width: 5px; 
     height: 5px; 
     content: " "; 
    } 
    .tabrow li:before { 
     left: -6px; 
     border-bottom-right-radius: 6px; 
     border-width: 0 1px 1px 0; 
     box-shadow: 2px 2px 0 #D1D1D1; 
    } 
    .tabrow li:after { 
     right: -6px; 
     border-bottom-left-radius: 6px; 
     border-width: 0 0 1px 1px; 
     box-shadow: -2px 2px 0 #D1D1D1; 
    } 
    .tabrow li.selected:before { 
     box-shadow: 2px 2px 0 #FFF; 
    } 
    .tabrow li.selected:after { 
     box-shadow: -2px 2px 0 #FFF; 
    }​ 

jQuery的

$("li").click(function(e) { 
    e.preventDefault(); 
    $("li").removeClass("selected"); 
    $(this).addClass("selected"); 
});​ 

有關它的詳細信息，你最好訪問here