使用CSS3制作倾斜导航条和毛玻璃效果

导航条对于每一个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轴方向都会发生倾斜，这并不是我们想要的效果。或者是使用skewX()。具体的代码实现如下。

平行四边形导航条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度，注意写上属性前缀，防止浏览器兼容性问题。