有人知道如何开发雷鸟邮件标签（版本 15）吗？看起来很棒，我真的不能在我的应用程序中做同样的事情。检查此屏幕截图：http: //s7.postimage.org/ocvxg9ooq/thunder.jpg
问问题
814 次
2 回答
11
它可以用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 </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");
});
有关它的更多详细信息，您最好访问这里
于 2012-09-03T08:56:10.640 回答
4
是的，我以前做过这样的事情 - 看看http://dabblet.com/gist/3166401（在 IE9 中也很好看）
And I've done now a quick version with multiple tabs: http://dabblet.com/gist/3608293/ (CSS only)
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; }
于 2012-09-03T09:58:43.933 回答