Demo在此。
都是一些基本的CSS3的使用，并不复杂。各位有兴趣地可以试着也写一个。
唯一复杂的地方是浏览器标签的模拟。
可以看出，Chrome标签的基本特点如下：
梯形
有圆角
宽度自适应
用图片可以轻松搞定，但是怎么能用图片呢？作为一个有追求的前端，肯定要用纯CSS3实现啊！
标签的HTML很简单：
XML/HTML Code复制内容到剪贴板 <ul class="tabs"> <li>新标签页</li> <li class="selected">百度一下，你就知道</li> <li>新标签页</li> </ul>梯形的两端用: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浏览器填充下渐变色，高度、宽度、位置也需要微调一下。
