设计师给了一个 tab 切换的效果图。虽然是一个很小的功能，但是前端工程师在实现的时候还是有很多细节需要注意。我写了一个 demo 给大家参考。
最终实现效果如下：
为了 gif 动画能够展示细节，我将动画时间延长到了 3 秒
代码分享地址：http://runjs.cn/detail/h2dqt3td
实现思路
间隔竖线，因为不是顶天立地的，所以不能用边框。我准备用伪元素实现。
只有 3 个竖线，但是有 4 个 li ，这个简单，可以用 :not(:first-child) 选择器来选择。
切换的背景颜色变化，因为想要有从小到大的效果，因此，也不能直接使用背景颜色实现，我也准备用伪元素实现。
如果用伪元素的大小来控制，计算会比较复杂，因此，我想用 box-shadow 阴影来实现。
好，大体就是如此了，下面开始写代码，如下：
HTML 代码
最低0.47元/天 解锁文章
1310
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
