CSS 实现Chrome标签栏的技巧

1. 介绍

Chrome 浏览器的标签栏给人以美观、简洁、舒适的感觉，下面我们来探讨一下 CSS 是如何实现这一效果的。

2. Chrome 标签栏的特点

Chrome 标签栏的特点有：

标签栏的整体高度较小，只有大约 30px

标签之间有一定的间距

中间的标签要比两边的标签略大

2.1 标签栏整体高度

要达到标签栏整体高度较小的效果，需要将 body 的 margin 和 padding 去掉，并使 html 中的 font-size 去掉，同时将 line-height 设置为 1 来让行距最小。

关键代码:

html, body {
  margin: 0;
  padding: 0;
}
html {
  font-size: 0;
}
body {
  font-size: 16px;
  line-height: 1;
}

2.2 标签之间的间距

标签之间的间距可以通过设置 margin-right 的值来进行调节。

关键代码:

.tab {
  margin-right: 20px;
}

2.3 中间的标签略大

中间的标签大小略大可以通过设置 transform: scale() 来进行缩放，同时通过设置 z-index 来遮盖旁边的标签。

关键代码:

.tab.active {
  transform: scale(1.2);
  z-index: 1;
}
.tab.active ~ .tab {
  transform: scale(1);
  z-index: 0;
}

3. 完整代码

经过上面的调整，我们得到了一个基本的 Chrome 标签栏。下面是完整的 css 代码：

html,
body {
  margin: 0;
  padding: 0;
}
html {
  font-size: 0;
}
body {
  font-size: 16px;
  line-height: 1;
}
.tab {
  margin-right: 20px;
  border-top: 3px solid transparent;
  box-sizing: border-box;
  cursor: pointer;
}
.tab.active {
  transform: scale(1.2);
  z-index: 1;
}
.tab.active ~ .tab {
  transform: scale(1);
  z-index: 0;
}
.tab:hover {
  border-top: 3px solid #4285f4;
}
.tab.active {
  border-top: 3px solid #4285f4;
}

我们可以用这份代码作为例子来学习 CSS 的基本语法和布局。