磨砂效果

（2026年更新）仅适配现代浏览器（Chrome、Firefox、Safari、Edge最新版） 的磨砂（毛玻璃）效果方案，核心基于 backdrop-filter 实现（无需分层、无需SVG滤镜，极简高效），以下是完整可直接使用的代码和关键说明：

一、核心实现代码（基础版）

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>现代浏览器磨砂效果</title>
  <style>
    /* 页面背景（用于衬托磨砂效果） */
    body {
      margin: 0;
      min-height: 100vh;
      background: url(./bg.jpg) center/cover fixed; /* 替换为你的背景图 */
    }

    /* 核心磨砂容器 */
    .frosted-glass {
      /* 基础布局 */
      width: 400px;
      height: 300px;
      margin: 100px auto;
      padding: 20px;
      /* 磨砂核心属性 */
      background: rgba(255, 255, 255, 0.2); /* 半透明底色，增强磨砂质感 */
      backdrop-filter: blur(10px); /* 背景模糊半径（核心） */
      -webkit-backdrop-filter: blur(10px); /* Safari 兼容前缀 */
      /* 视觉优化（可选） */
      border-radius: 12px; /* 圆角 */
      border: 1px solid rgba(255, 255, 255, 0.3); /* 半透明白边 */
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); /* 柔和阴影，增强层次感 */
    }

    /* 内容样式（仅示例） */
    .glass-content {
      color: #fff;
      font-size: 18px;
      text-align: center;
      line-height: 2;
    }
  </style>
</head>
<body>
  <div class="frosted-glass">
    <div class="glass-content">
      现代浏览器磨砂（毛玻璃）效果<br>
      基于 backdrop-filter 实现<br>
      无需兼容老旧浏览器
    </div>
  </div>
</body>
</html>

二、关键属性说明

属性 作用 注意事项
backdrop-filter: blur(10px) 核心：模糊容器背后的背景（而非容器本身） Firefox需开启layout.css.backdrop-filter.enabled（最新版已默认开启）
-webkit-backdrop-filter: blur(10px) 兼容 Safari 浏览器 必须保留，否则Safari无效果
background: rgba(255,255,255,0.2) 半透明底色 纯透明（rgba(0,0,0,0)）会让磨砂效果不明显，建议设 0.1~0.3 透明度
border: 1px solid rgba(255,255,255,0.3) 半透明白边 增强磨砂的“玻璃质感”，可选但推荐加

三、进阶优化（动态/交互版）

如果需要带 hover 交互的磨砂效果，只需添加过渡动画：

1
2
3
4
5
6
7
8
9
10
11
.frosted-glass {
  /* 保留原有样式 */
  transition: all 0.3s ease; /* 过渡动画 */
}

.frosted-glass:hover {
  background: rgba(255, 255, 255, 0.3); /* 提高透明度 */
  backdrop-filter: blur(15px); /* 增强模糊 */
  -webkit-backdrop-filter: blur(15px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15); /* 加深阴影 */
}

四、兼容性说明（现代浏览器）

浏览器 支持情况 备注
Chrome 76+ 完全支持 -
Firefox 103+ 完全支持 早期版本需手动开启配置
Safari 14+ 完全支持 需带 -webkit- 前缀
Edge 79+ 完全支持 基于Chromium内核，同Chrome

总结

关键点回顾

  1. 现代磨砂效果核心是 backdrop-filter: blur(px)，配合 -webkit- 前缀兼容Safari；
  2. 半透明 background 是磨砂质感的关键，纯透明会导致效果不明显；
  3. 可选添加圆角、半透边框、阴影，能大幅提升“玻璃感”；
  4. 无需分层/SVG滤镜，代码极简，性能优于老旧方案。

直接复制上述代码，替换背景图路径即可在现代浏览器中看到完美的磨砂效果，无需考虑任何老旧浏览器兼容逻辑。

学无止境
磨砂效果
https://cszy.top/2017-11-14 磨砂效果（一）/
作者
csorz
发布于
2017年11月14日
许可协议