CSS 实现毛玻璃效果

Part.1 HTML

 <!-- 最外层盒子 -->
 <div class="box">
     <!-- 添加毛玻璃效果盒子 -->
     <div class="box--effect"></div>
     <!-- 展示的内容 -->
     <div class="box_content">
        <p class="box_content_text">头文字<span class="box_content_text_D">D</span></p>
     </div>
 </div>

Part.2 效果如下

Part.3  找到需要添加毛玻璃效果的盒子(DIV)，添加如下代码

 .box--effect {
     width: 100%;
     height: 100%;
     background: inherit;
     -webkit-filter: blur(5px);
     -moz-filter: blur(5px);
     -ms-filter: blur(5px);
     -o-filter: blur(5px);
     filter: blur(5px);
     filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=4, MakeShadow=false);  /* ie6-9*/
 }

Part.4  效果如图