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

时间：2021-05-08

Demo在此。

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

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


可以看出，Chrome标签的基本特点如下：

梯形
有圆角
宽度自适应

用图片可以轻松搞定，但是怎么能用图片呢？作为一个有追求的前端，肯定要用纯CSS3实现啊！

标签的HTML很简单：

XML/HTML Code复制内容到剪贴板
  • <ulclass="tabs">
  • <li>新标签页</li>
  • <liclass="selected">百度一下，你就知道</li>
  • <li>新标签页</li>
  • </ul>

    • 梯形的两端用:before 与 :after 轻松搞定。

    CSS Code复制内容到剪贴板
  • .tabsli:before,
  • .tabsli:after{
  • width:16px;
  • height:24px;
  • content:"";
  • border:1pxsolid#3b5c95;
  • }

    • 处理定位的时候需要注意元素间的z-index关系。

    CSS Code复制内容到剪贴板
  • .tabsli{
  • display:inline-block;
  • position:relative;
  • z-index:0;
  • }
  • .tabsli:before,
  • .tabsli:after{
  • position:absolute;
  • z-index:3;
  • }
  • .tabsli:before{
  • left:-12px;
  • }
  • .tabsli:after{
  • rightright:-12px;
  • }

    • 变形则使用CSS3的transform。

    CSS Code复制内容到剪贴板
  • .tabsli:before{
  • -o-transform:skew(-22deg);
  • -ms-transform:skew(-22deg);
  • -moz-transform:skew(-22deg);
  • -webkit-transform:skew(-22deg);
  • transform:skew(-22deg);
  • }
  • .tabsli:after{
  • -o-transform:skew(22deg);
  • -ms-transform:skew(22deg);
  • -moz-transform:skew(22deg);
  • -webkit-transform:skew(22deg);
  • transform:skew(22deg);
  • }

    • 好了，差不多大功告成了。接下来还要稍微调整下，对照Chrome浏览器填充下渐变色，高度、宽度、位置也需要微调一下。

    声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章