玻璃在屏幕里
2020 年，Apple 在 macOS Big Sur 中大面积使用了一种被称为"玻璃态"的设计语言。半透明的侧边栏、模糊的窗口背景，让操作系统看起来像是由磨砂玻璃雕刻而成。
四年后，这种风格没有被淘汰，反而成为现代 UI 设计的底层语言之一。幻梦主题就是建立在这种语言之上。
为什么是毛玻璃？
传统的"卡片式"设计有一个致命问题：缺乏深度感。
纯色卡片漂浮在纯色背景上，能表达的信息层次只有两层：卡片在前，背景在后。添加阴影可以增强立体感，但仍然缺乏空间连续感。
毛玻璃解决了这个问题。backdrop-filter: blur() 让卡片背后的内容以模糊的方式透过，暗示了空间深度——卡片之下还有一层世界。
CSS 实现
核心代码非常简单：
.glass-card {
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 16px;
}
但简单不等于容易。毛玻璃效果有几个坑：
1. 性能代价
backdrop-filter 是一个 GPU 密集型属性。每个应用了模糊的元素都需要浏览器对背后区域进行实时采样和卷积运算。卡片越多，帧率越低。
幻梦的处理策略：
/* 不同元素使用不同模糊半径，平衡效果与性能 */
.header { backdrop-filter: blur(20px); } /* 大面积固定元素 */
.card { backdrop-filter: blur(16px); } /* 核心卡片 */
.sidebar-widget { backdrop-filter: blur(10px); } /* 小部件更轻 */
.tag { backdrop-filter: none; } /* 小元素不用 */
2. 文字可读性
毛玻璃卡片上的文字需要足够的对比度。纯透明背景 + 白色文字在亮色背景上是不可读的。
解决方案：半透明渐变填充 + 叠加模糊。
.glass-card {
background:
linear-gradient(
135deg,
rgba(255, 255, 255, 0.15),
rgba(255, 255, 255, 0.05)
);
backdrop-filter: blur(16px);
}
3. Safari 兼容
Safari 需要 -webkit- 前缀，且在 background 和 backdrop-filter 的交互上有差异。幻梦使用了双重声明确保跨浏览器一致性。
在幻梦中的应用
- 导航栏：固定定位，模糊让用户感知下方滚动内容
- 卡片系统：文章卡片、技能卡片、友链卡片、工具卡片统一玻璃态
- 搜索模态框：大面积遮罩 + 中央玻璃卡片
- 侧边栏部件：日历、标签云、文章信息
玻璃的边界
好的设计知道何时停止。幻梦中以下元素不使用毛玻璃：
- 正文区域：模糊会降低阅读速度
- 代码块：代码需要纯粹的可读性
- 按钮：小面积元素模糊没有意义
- 小标签：看不见背后内容的小元素不需要模糊
毛玻璃不是目的，通透感才是。设计不是为了炫技，而是让内容说话。
评论