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  效果如图