后端开发教程 - Java、Spring Boot 实战 - msg200.com
CSS 上的磨砂玻璃
又一周学习新知识啦！这篇博客里，我要跟大家分享如何只用 CSS 制作毛玻璃！有很多变化可以实现，而且网上肯定能找到。快来一起探索吧！
在本博客结束时，我们应该在CodePen上看到类似 Kyle Wetton 的磨砂玻璃的东西：
免责声明：部分应用目前不兼容 Firefox、Firefox Android 版和 Internet Explorer。请查看我们的 Glass 4，了解更广泛的浏览器兼容性。
首先，我们来创建一个包含所有需要元素的 HTML 文件。我这里想用那种磨砂玻璃设计做一个模拟登录界面。
现在在我们的 CSS 文件上，我们可以将背景图像应用到我们的“主体”，调整位置并指示所需的尺寸，然后我们将进入磨砂玻璃。
实现这个有很多方法。以下是我尝试过的方法：
玻璃 1
在你的“formDiv”上，你可以应用 backdrop-filter 和 box-shadow。在本例中，box-shadow 的阴影和颜色不透明度已设置，宽度为 200px。background-filter 的模糊设置为 8px。更多关于 backdrop-filter 的内容，请见我的下一篇博客！
-webkit-backdrop-filter: blur(8px); /* Safari 9+ */
backdrop-filter: blur(8px); /* Chrome and Opera */
box-shadow: inset 0 0 0 200px rgba(255,255,255,0.08);
玻璃 2
在这个玻璃杯中，我们将盒子阴影设置得更暗、更突出（通过删除“插入”的默认值）和更不透明，并添加背景颜色。
-webkit-backdrop-filter: blur(8px); /* Safari 9+ */
backdrop-filter: blur(8px); /* Chrome and Opera */
box-shadow: 0px 10px 15px 10px rgb(0 0 0 / 15%);
background-color: rgb(228 228 228 / 15%);
玻璃 3
我尝试过的另一件事是使用过滤器！但是我没有使用模糊作为过滤器，而是使用了阴影与背景颜色和框阴影（插图）的组合。
filter: drop-shadow(2px 4px 6px black);
background-color: rgb(152 151 151 / 25%); /* Just adjust the color or opacity to make the text pop! */
box-shadow: inset 0 0 0 200px rgb(255 255 255 / 8%);
玻璃 4
与我们的 IE 和 Firefox 浏览器兼容！
background: #969899; /* Definitely adjustable to what shade you like */
opacity: 0.6;
玻璃 5
如果尝试一下直到获得想要的模糊效果并想要添加一点趣味，您还可以附加另一个背景滤镜和一些边框！
backdrop-filter: grayscale(.8) blur(5px);
box-shadow: inset 0 0 0 200px rgba(255,255,255,0.08);
border-top: 2px solid rgba(225, 225, 225, 0.3);
border-left: 2px solid rgba(225, 225, 225, 0.1);
border-right: 1px solid rgba(225, 225, 225, 0.2);
查看我的 CodePen 了解最终结果！
我做这个玩得很开心！希望你也一样！
下次再见！
参考/链接：
- CSS 技巧- 使用 filter() 在 CSS 上实现磨砂玻璃效果
- 背景照片- 矢量自然壁纸
- 使用的 Google 字体：
- 磨砂玻璃设计灵感：Lennart Hase 的 CodePen