CSS3例項學習2-tab
製作tab選擇欄，原理就是使用radio作為標籤，因為每次只能選擇一個，所以和tab效果一樣。
1、html5程式碼如下：
<section class="radiotabs">
<input type="radio" name="tab" id="tab1" class="tabs" checked="checked">
<label for="tab1">
tab1
</label>
<input type="radio" name="tab" id="tab2" class="tabs">
<label for="tab2">
tab2
</label>
<input type="radio" name="tab" id="tab3" class="tabs">
<label for="tab3">
tab3
</label>
<input type="radio" name="tab" id="tab4" class="tabs">
<label for="tab4">
tab4
</label>
<input type="radio" name="tab" id="tab5" class="tabs">
<label for="tab5">
tab5
</label>
<section id="view1" class="tabcontent">
內容一
</section>
<section id="view2" class="tabcontent">
內容二
</section>
<section id="view3" class="tabcontent">
內容三
</section>
<section id="view4" class="tabcontent">
內容四
</section>
<section id="view5" class="tabcontent">
內容五
</section>
</section>
2、css程式碼比較複雜：
/*單選標籤*/
input.tabs {
display:none;
}
/*單選標籤及相鄰的label：+符號代表相鄰元素*/
input.tabs + label {
display:block; /*顯示*/
font:normal 12px/30px arial, sans-serif; /*字型*/
border:1px solid #aaa; /*邊框*/
background:#69c; /*背景*/
text-decoration:none; /*下劃線*/
color:#fff; /*顏色*/
float:left; /*浮動對齊*/
position:relative; /*
padding:0 20px; /*內邊距*/
margin-right:2px; /*右外邊距*/
border-radius:5px 5px 0 0; /*圓角半徑*/
background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, rgba(255, 255, 255, 0.7)), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.5, transparent), to(rgba(255, 255, 255, 0.3)));/*背景（gradient：漸變效果，linear：線性漸變）*/
background-image:-moz-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
background-image:-ms-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
background-image:-o-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
background-image:linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
}
/*標籤下圖片效果*/
input.tabs + label img {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
cursor:pointer;
}
/*標籤內容*/
.tabcontent {
width:700px; /*寬度*/
padding:20px; /*內邊距*/
border:1px solid #aaa; /*邊框*/
border-radius:0 5px 5px 5px; /*圓角半徑*/
background:#fff; /*背景顏色*/
position:relative; /*位置*/
z-index:10; /*層次*/
display:none; /*顯示效果*/
clear:left; /*清理左邊*/
top:-1px; /*上邊緣位置*/
box-shadow:0 15px 10px -15px rgba(0,0,0,0.4); /*陰影*/
}
/*標籤內容*/
.tabcontent {
display:none; /*顯示*/
color:#000; /*顏色*/
}
/*被選中的radio按鈕和label*/
input.tabs:checked + label {
background-color:#fff;
border-bottom:1px solid #fff;
color:#000; z-index:20;
}
/*選中的radio按鈕*/
input#tab1:checked ~ section#view1 {display:block;}
input#tab2:checked ~ section#view2 {display:block;}
input#tab3:checked ~ section#view3 {display:block;}
input#tab4:checked ~ section#view4 {display:block;}
input#tab5:checked ~ section#view5 {display:block;}
input#tab5:checked ~ section#view5 {display:block;}
在chrome下顯示效果如下：