都是一些基本的CSS3的使用，並不復雜。各位有興趣地可以試著也寫一個。
唯一復雜的地方是浏覽器標簽的模擬。
可以看出，Chrome標簽的基本特點如下：
梯形
有圓角
寬度自適應
用圖片可以輕松搞定，但是怎麼能用圖片呢?作為一個有追求的前端，肯定要用純CSS3實現啊!
標簽的HTML很簡單：
XML/HTML Code復制內容到剪貼板
- 新標簽頁
- 百度一下，你就知道
- 新標簽頁
梯形的兩端用:before 與 :after 輕松搞定。
CSS Code復制內容到剪貼板
.tabs li:before,
.tabs li:after {
width: 16px;
height: 24px;
content: " ";
border: 1px solid #3b5c95;
}
處理定位的時候需要注意元素間的z-index關系。
CSS Code復制內容到剪貼板
.tabs li {
display: inline-block;
position: relative;
z-index: 0;
}
.tabs li:before,
.tabs li:after {
position: absolute;
z-index: 3;
}
.tabs li:before {
left: -12px;
}
.tabs li:after {
rightright: -12px;
}
變形則使用CSS3的transform。
CSS Code復制內容到剪貼板
.tabs li:before {
-o-transform: skew(-22deg);
-ms-transform: skew(-22deg);
-moz-transform: skew(-22deg);
-webkit-transform: skew(-22deg);
transform: skew(-22deg);
}
.tabs li:after {
-o-transform: skew(22deg);
-ms-transform: skew(22deg);
-moz-transform: skew(22deg);
-webkit-transform: skew(22deg);
transform: skew(22deg);
}
好了，差不多大功告成了。接下來還要稍微調整下，對照Chrome浏覽器填充下漸變色，高度、寬度、位置也需要微調一下。