設計師給了一個 tab 切換的效果圖。雖然是一個很小的功能，但是前端工程師在實現的時候還是有很多細節需要注意。我寫了一個 demo 給大家參考。

最終實現效果如下：

為了 gif 動畫能夠展示細節，我將動畫時間延長到了 3 秒

實現思路

1.間隔豎線，因為不是頂天立地的，所以不能用邊框。我準備用偽元素實現。

2.只有 3 個豎線，但是有 4 個 li ，這個簡單，可以用 :not(:first-child) 選擇器來選擇。

3.切換的背景顏色變化，因為想要有從小到大的效果，因此，也不能直接使用背景顏色實現，我也準備用偽元素實現。

4.如果用偽元素的大小來控制，計算會比較複雜，因此，我想用 box-shadow 陰影來實現。

好，大體就是如此了，下面開始寫程式碼，如下：

HTML 程式碼

上面的程式碼結構是之前已經寫好的，我看可以，就不做任何調整了。沒有什麼累贅的程式碼。

CSS 程式碼

程式碼分析：

動畫實現非常簡單，只要使用 transition 屬性即可。

控制自己的偽元素和下一個同級元素的偽元素，只需要使用 + 選擇器即可。

其他程式碼都比較清晰簡單，自己分析即可。

實現這個效果還是非常簡單的，重點是平時的積累，以及各種引數的靈活搭配。想到實現方法，最終寫程式碼是很快的事情。而且沒有什麼知識高點在裡面。

CSS 之所以難，不是你不會，而是不不會去搭配。

其實，還是隻還原了99%的設計效果，兩條線一個在背景裡面，一個在背景外面，想要把兩條分割線都放到背景裡面來，應該如何實現呢？可以思考一下。

安利一下 scss 。上面的 css 是編譯出來的。其實用 scss 實現非常方便快捷，程式碼可讀性也更高。

當然，這段程式碼中我用了顏色變數以及 mixin 混入程式碼。你不能直接使用。

更多有關 scss 的內容，可以檢視這個網站 sass入門 - sass教程