HTML5先行者高级交流群

html5先行者

欢迎加入学习讨论

专注前端，专注网页设计制作及网站开发项目 - (低价承接网站开发项目) QQ：370158739加入收藏RSS

您的位置: 首页 > 视频教程 > CSS3视频教程 » 正文

使用CSS3制作一个简单的Chrome模拟器_Div+Css教程

2015-07-16 22:32:44 [小大] 已经帮助：人解决问题

　　都是一些基本的CSS3的使用，并不复杂。各位有兴趣地可以试着也写一个。

　　唯一复杂的地方是浏览器标签的模拟。

2015715180124630.jpg (600×75)

　　可以看出，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浏览器填充下渐变色，高度、宽度、位置也需要微调一下。

（责任编辑：）

推荐书籍

推荐资讯

html5及css3做的3D小房子

html5及css3做的3D小

html5视频应用

html5视频应用

友情链接:联系人：QQ370158739

关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助