都是一些基本的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浏览器填充下渐变色，高度、宽度、位置也需要微调一下。