CSS3製作導航條和毛玻璃效果

CSS3是CSS技術的升級版本，CSS3語言開發是朝著模組化發展的。用CSS3怎麼製作導航條和毛玻璃效果？下面yjbys小編為大家分享通過CSS3來製作類似下面的導航條和毛玻璃效果教程吧！

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

導航條是梯形形狀的。

背景區域的毛玻璃效果。

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

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

具體程式碼如下。

ainer {

position: relative;

}

ainer::after {

content: '';

position: absolute;

left: 0;

right: 0;

bottom: 0;

top: 0;

z-index: -1;

}

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