css仿ios7毛玻璃

CSS仿iOS7毛玻璃效果是一种非常流行的设计效果，可以为你的网站或移动应用增加一个简洁而高端的触感。下面我们来分享一下如何实现这种效果。

/* 开始设置 */
.blur{
    position: relative;
} 

.blur:before{
    content: "";
    position: absolute;
    top: -10px;
    right: -10px;
    bottom: 10px;
    left: -10px;
    background: inherit;
    z-index: -1;
    filter: blur(10px);
    -webkit-filter: blur(10px);
} 

.blur:after{
    content: "";
    position: absolute;
    top: -10px;
    right: -10px;
    bottom: 10px;
    left: -10px;
    background: rgba(255,255,0.5);
    z-index: -1;
} 
/* 结束设置 */

上面的代码使用了 CSS 的伪元素实现了毛玻璃效果。首先，我们需要为需要添加效果的元素加上一个相对定位的类名。

然后使用

.blur:before

和

.blur:after

设置前后两个伪元素，分别实现模糊和半透明的遮罩效果。其中前面的

filter: blur(10px);

和

-webkit-filter: blur(10px);

分别实现了毛玻璃模糊效果。最后将整体设置一个 z-index 属性，确保没有被其他元素遮挡住。

以上就是实现 CSS 仿 iOS7 毛玻璃效果的全部代码，如果你想让你的网站或移动应用更加酷炫和高端，就赶快来试试吧！