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,255,0.5);
        z-index: -1;
}
     /* 结束设置 */

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

然后使用

.blur:before

.blur:after

filter: blur(10px);
    

-webkit-filter: blur(10px);
    

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！