CSS简易毛玻璃效果

CSS简易毛玻璃效果

2021年06月30日 14:35 ·  阅读 5199

CSS 毛玻璃效果

一、什么是毛玻璃效果?

1.png

  • 背景模糊的磨砂玻璃效果
  • 空间物体漂浮多层次
  • 鲜艳的色彩突出模糊的透明度
  • 半透明物体上有一个细微的光线边界

二、如何实现?

.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) 来回到半透明效果。

posted on   漫思  阅读(71)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· 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 数组的一些运算操作

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8
点击右上角即可分享
微信分享提示