第一、别急着写代码，先搞清楚你到底想要啥#

毛玻璃效果本质上就两件事：模糊背景 + 半透明叠加。听起来简单对吧？但十个人里有九个写出来效果都不一样。

核心属性是 backdrop-filter: blur()，搭配半透明的背景色。有些人上来就 background: white 然后 opacity: 0.5，然后跑来问我为什么模糊不出来——我？？？

半透明和模糊是两码事！你要的是 rgba(255, 255, 255, 0.25) 这种带透明度的颜色，不是整个卡片透明度调低。记住了吗？没记住的往前翻十遍。

第二、基础写法，这才是正经开场#

先上一段最基础的代码，别嫌丑，这是地基：

1
.glass-card {
2
  background: rgba(255, 255, 255, 0.15);
3
  backdrop-filter: blur(10px);
4
  -webkit-backdrop-filter: blur(10px);
5
  border: 1px solid rgba(255, 255, 255, 0.3);
6
  border-radius: 16px;
7
}

诶对，你没看错，-webkit- 前缀必须写。别跟我犟说现在浏览器都支持了——Safari你以为是摆设？尤其是iOS用户，那帮人可不会跟你客气，不加前缀直接给你看大白板。

背景色建议用 rgba，透明度根据你想要的朦胧程度调，0.1到0.3之间最常见。模糊值 blur(10px) 到 blur(20px) 够用了，再大糊成一片看不清内容，纯属给自己找麻烦。

第三、边框这道坎，很多人栽跟头#

毛玻璃卡片美不美，边框占一半功劳。你们看我上面代码里写了 border: 1px solid rgba(255, 255, 255, 0.3)，这可不是随便写的。

白色半透明边框配合模糊背景，出来的效果是那种微微发光的高级感。如果你不写边框，整个卡片会和背景糊在一起，层次感全无。

但！很多人边框写死了白色 border: 1px solid #fff，然后背景是深色的——得，卡片边缘一条死白的线，丑哭了。记住了，边框颜色必须跟着背景走，要么用 rgba 要么用 hsla，保持透明感。

第四、阴影别乱加，加错不如不加#

有些人觉得毛玻璃效果不够立体，啪就加个 box-shadow。你加就加吧，还整个 0 10px 40px rgba(0,0,0,0.3)——这哪是毛玻璃啊，这是混凝土浇筑出来的毛坯房。

毛玻璃本身自带朦胧的空气感，你再加个硬邦邦的深色阴影，等于把那份通透感全毁了。正确做法是：如果非要阴影，用浅色 + 高透明度，比如 0 8px 32px rgba(255, 255, 255, 0.1) 或者干脆不写。

本宫建议试试放弃阴影，就靠模糊 + 边框 + 背景色深浅来营造层次。这才是毛玻璃的正确打开方式。

第五、移动端适配，才是真正的大坑#

电脑上跑得美滋滋，真机一测——华为机型白屏、小米机子只模糊了一半、三星某版干脆无效……血压瞬间上来了是吧？

移动端的坑主要有两个：

第一个，backdrop-filter 支持度问题。 iOS Safari 从 9 开始支持，没毛病。但安卓那边可就精彩了——Chrome 76+ 才支持，之前的老机器？想都别想。鸿蒙系统大部分支持，但某些定制ROM会抽风。

解决方案：渐进增强。别把这个效果当作唯一方案，先写普通半透明背景，然后才用 @supports 来判断是否应用模糊：

1
.glass-card {
2
  background: rgba(255, 255, 255, 0.6); /* fallback */
3
}
4

5
@supports (backdrop-filter: blur(10px)) {
6
  .glass-card {
7
    background: rgba(255, 255, 255, 0.15);
8
    backdrop-filter: blur(10px);
9
    -webkit-backdrop-filter: blur(10px);
10
  }
11
}

第二个，硬件加速问题。 移动端 GPU 性能参差不齐，模糊值太大直接卡成 PPT。实测下来，模糊不超过 20px 基本稳了，超过这个值在低端机上就是自虐。

第六、性能优化，别让用户手机发烧#

毛玻璃效果是很吃性能的——浏览器要对背景层做实时渲染+模糊计算，CPU/GPU 双倍打工。

几个优化建议：不要在毛玻璃卡片里再套一层也带毛玻璃的子元素，嵌套模糊是性能杀手。动画属性尽量用 transform 和 opacity，别碰 blur——blur 本身就不能做动画，你一动手就要重绘整个模糊层，帧率直接扑街。

还有一招：给卡片加个 will-change: backdrop-filter 提前告诉浏览器这个元素会变化，可以减少重排。但别全局滥用，用在哪就在哪写，别搞成 CSS 最佳实践标配乱贴。

第七、深色模式下的特殊处理#

毛玻璃卡片在深色背景下效果最好，这点你们应该知道。但如果你的页面要兼容深色/浅色两种模式，就得做适配。

深色背景下，背景色用 rgba(255, 255, 255, 0.1) 到 rgba(255, 255, 255, 0.15) 就行，太亮会喧宾夺主。浅色背景呢？老实说毛玻璃效果在纯白背景下优势不大，非要做的话背景色用 rgba(0, 0, 0, 0.05) 到 rgba(0, 0, 0, 0.1)，边框换成深色半透明。

强行在浅色背景上套毛玻璃，出来的效果往往是又灰又脏，不如直接用普通白色卡片加点阴影。

行了，该说的都说了。你们要是照着这套方案做出来效果还是不对，先别急着骂 CSS，骂自己代码是不是复制漏了半截。本宫的话撂这儿了：这套方案兼容性、性能、视觉效果都过关，拿去用吧。

最后提醒一句——毛玻璃虽好，可别贪杯哦，满屏都是毛玻璃等于没效果，层次感这种东西讲究的是对比。行了，滚去写代码吧，下课！