導航條對于每一個Web前端攻城獅來說并不陌生，但是毛玻璃可能會相對陌生一些。簡單的說，毛玻璃其實就是讓圖片或者背景使用相應的方法進行模糊處理。這種效果對用戶來說是十分具有視覺沖擊力的。

本次分享的主題：通過CSS3來制作類似下面的導航條和毛玻璃效果。

導航條是梯形形狀的。

背景區域的毛玻璃效果。

把導航條和毛玻璃效果在一篇文章中分享其實是有原因的。因為這兩個效果的實現離不開一個重要的思想。

用語言來描述就是：父元素設置position:relative，其偽元素（after或者before）設置 position:absolute，并且讓top,bottom,left,right都為0，偽元素占滿父元素的整個空間，最后設置z-index將背景放在父元素后邊。

具體代碼如下。

 什么意思呢？稍安勿躁，我會在接下來的兩個實戰例子中對這段代碼的意思一一道來。

文章結構：

1.導航條

　　1.1：平行四邊形導航條

　　1.2：梯形導航條

2.毛玻璃效果

3.結束語

4.參考文章

1.導航條

1.1：平行四邊形導航條

平行四邊形制作的思想：平行四邊形的制作運用了CSS3 2D 變形中的skew()傾斜屬性，因為我們只是在水平方向上傾斜，所以在使用skew()時需要將第二個參數指定為0，否則x，y軸方向都會發生傾斜，這并不是我們想要的效果?；蛘呤鞘褂胹kewX()。具體的代碼實現如下。

平行四邊形導航條HTML

上面代碼中，只顯示了部分重要部分。在設置平行四邊形的時候需要注意以下幾點：

1.給 li 元素設置relative，然后偽元素after設置absolute和LRBT四個方向的定位。原因在于我們需要讓偽元素相對與 li 元素定位，并且讓偽元素填滿整個 li 元素的空間，這樣的話給偽元素設置的背景就會鋪滿整個 li 元素 。最重要的是，在偽元素上設置skewX()，只會對偽元素進行傾斜，并不會對父元素上的文字進行傾斜。

2.設置z-index:-1。這里如果不設置z-index值為負值的話，就看不到在 li 元素里面的文字了，因為absolute會提高自身元素的層級，所以要讓偽元素z-index為-1，讓其的層級位居 li 元素之后。

3.使用skewX()函數讓 偽元素（不是 li 元素） 元素旋轉 25度，注意寫上屬性前綴，防止瀏覽器兼容性問題。