使用CSS3制作一个简单的Chrome模拟器

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

收藏此文 赞一下！() 打赏本站

如本文对您有帮助，就请建站学习网抽根烟吧！

支付宝打赏
微信打赏