html - border-radius タブは Thunderbird タブのように見えます

Question

Thunderbird メール タブ (バージョン 15) の開発方法を知っている人はいますか? 見栄えがよく、アプリで同じことを実際に行うことはできません. このスクリーンショットを確認してください: http://s7.postimage.org/ocvxg9ooq/thunder.jpg

Answer 1

:beforecssと: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 </p>

.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");
});​

詳細については、こちらをご覧ください。

Answer 2

はい、私は以前にこのようなことをしました-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; }