CSS简易毛玻璃效果
CSS简易毛玻璃效果
CSS 毛玻璃效果
一、什么是毛玻璃效果?
- 背景模糊的磨砂玻璃效果
- 空间物体漂浮多层次
- 鲜艳的色彩突出模糊的透明度
- 半透明物体上有一个细微的光线边界
二、如何实现?
.example{
background: rgba(255, 255, 255, 0.2);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border-radius: 25px;
box-shadow:inset 0 0 6px rgba(255, 255, 255, 0.2);
}
复制代码
三、兼容问题?
1、如果只是简单的背景,可以使用
background-attachment: fixed
配合filter: blur()
进行模拟;
2、对于fireFox浏览器,可以使用
moz-element()
配合filter: blur()
实现复杂背景毛玻璃效果;
3、如不兼容上述效果,可以通过设置
background: rgba(255, 255, 255, 0.5)
来回到半透明效果。
漫思
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤
2022-03-14 各个tab的问题
2022-03-14 打印程序
2022-03-14 我心目中的编程高手(完整版)
2022-03-14 GitHub上整理的一些工具
2022-03-14 Microsoft Visual Studio 配置汇编语言开发环境
2022-03-14 React Laser Beam
2019-03-14 数组的一些运算操作