CSS 文字模糊效果 毛玻璃效果 多重边框效果

文字模糊效果

只需要添加以下两行代码，即可达到将文字模糊处理的目的：

color: transparent;
text-shadow: #111 0 0 5px;

 毛玻璃效果

 其实毛玻璃的模糊效果技术上比较简单，只是用到了 css 滤镜（filter）中的 blur 属性。但是要做一个好的毛玻璃效果，需要注意很多细节。下面提供一个简单示例：

.blur {
    display: block;
    width: 300px;
    height: 300px;
    margin: 100px auto;
    filter: blur(10px);
}

<img src="./img/test.png" class="blur" alt="">

多重边框效果

在css中，我们可以利用重复指定box-shadow来达到多个边框的效果：

/*CSS Border with Box-Shadow Example*/
div {
    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2);
    height: 200px;
    margin: 50px auto;
    width: 400px
}

 文章转载自：这些鲜为人知的前端冷知识，你都GET了吗？_一些奇怪的前端技术-CSDN博客

看到猴哥写的这css效果我非常喜欢，于是转载过来了。如果你也喜欢，可以去猴哥那看看。