glassmorphism

玻璃拟态

打造一种材质，让其半透明效果如同受光照的玻璃窗格，同时确保文字清晰易读、控件易于使用。高级玻璃质感来自能承载光线的背景、薄薄的浅色填充、通过边缘光、高光和阴影体现的统一光照方向，以及密集内容下方经过稳定处理的底板。它绝不是靠增大模糊或不透明度实现的。

明确材质的用途

阅读需求说明和现有界面，了解平台、表面角色、阅读密度、背景的归属方、主题和目标设备。保留项目现有的组件、字体、设计令牌和交互惯例。常规选择可自行判断；此技能不会增加审批步骤或规划文档。

样式设计前，先区分三个层次：界面背后的环境、人们阅读或操作的内容，以及用于导航或控制的界面元素。玻璃需要有理由展示环境。在纯色背景上，模糊效果无内容可采样，表面就会变成灰色方块；此时应使用有色纯色表面，或者在需求允许的情况下，构造带有亮度渐变的背景。

表面	初始选择	在以下情况下调整
浮动工具栏、扩展坞、标签栏、紧凑型媒体或地图控件	使用玻璃胶囊；图标置于材质上，选中状态使用更浓的色块	不受控的图像或设备性能限制影响可读性时
一目了然的小组件（天气、指标、正在播放）	使用玻璃卡片，搭配较大的浅色数字和简短标签；根据背景亮度选择文字颜色	文案超过几行短句时：添加底板或改用纯色
弹出框、工作表、命令面板、设置面板	使用玻璃外壳，并在字段、行和代码下方放置经过稳定处理的底板	需要持续阅读时：使用纯色面板
表格、编辑器、长文本、图表标签、表单	使用纯色阅读区域；周围可选用玻璃	仅在测量文字背后的复合效果后使用
主要操作、错误、重要状态	使用稳定的前景/背景搭配和清晰可辨的状态	原生平台控件已提供经过验证的材质时
阻塞式模态背景	使用调暗遮罩	有经过测量且目的明确的效果足以证明额外渲染合理时

只加载所需分支

从此技能目录解析路径。参考资料内容完整；研究资料库为可选项。

需求	阅读
命名目标视觉效果、评估结果、选择令牌、修复扁平/浑浊/塑料感玻璃效果、在 Figma 中创作	艺术指导与材质；质量标准见参考图库
实现 Web 玻璃效果，集成 Tailwind/React/shadcn，诊断模糊缺失、裁切、层叠问题	Web 工程；改编 glass.css
在玻璃上放置文字或控件、适配任意背景、测量对比度、遵循用户偏好	无障碍与验证
添加透镜折射、色散边缘、变形效果，或面向原生 Liquid Glass、visionOS、Fluent、Material、Expo	高级效果与平台，仅阅读匹配的部分
追溯规则来源或扩展技能	证据与出处；覆盖目录仅用于记录，不是运行时阅读内容

material-lab.html 及其样式表是可运行的参考示例：包含七种背景（包括压力测试画板）、三种厚度预设、光线角度、填充和模糊倍数、折射、颗粒、纯色模式、实时对比度估算和令牌读数。它展示了这种材质；应将其改编到目标技术栈，而不是直接复制整个页面。

打造协调的材质

1. 构建背景并选择文字颜色。 照片、壁纸和具有亮度渐变的渐变色都能形成玻璃效果；每个表面周围都要保留可见的环境背景。根据表面背后的亮度选择文字颜色，并进行测量：仅在暗场景（相对亮度低于约 .1）中，才在浅色薄色调上使用白色文字；在中间调和粉彩场景中，使用烟熏中性色调（--glass-tint: 56 50 58，约 .66）上的白色文字；在浅色和近白色场景（高于 .6）中，使用白色霜面（约 .62）上的深色文字。在粉彩照片上，浅色调上的白色文字对比度会低于 2:1；实验室会根据背景切换模式并显示估算值。Apple 的材质会自动切换；在 Web 上，你需要根据场景决定。
2. 锁定一个光照方向，并用五种方式呈现。 --glass-light 驱动 1px 边缘渐变（受光侧明亮，另一侧较暗）、1px 内侧高光及其带阴影的对应效果、光泽衰减和高度阴影。每条边都加高光，或大面积铺白，都会显得像塑料。
3. 先调整薄度，只在阅读需要时加厚。 从预设值开始（透明 .07/6px、常规 .16/14px、磨砂 .34/26px，搭配 saturate(1.4–1.7) brightness(1.05)），然后在密集文本下添加 .glass-plate，不要提高整个表面的 alpha。控件使用胶囊形，卡片圆角为 24–30px，内层圆角采用同心设计。
4. 保护内容与交互。 对表面应用滤镜，绝不要对标签子树应用滤镜；边缘和光泽伪元素应不可交互；调整填充透明度，而不是元素不透明度。状态变化应由结构决定：悬停时提高填充和边缘效果，按下时压缩阴影，禁用时去除边缘和光泽，焦点状态则在堆叠层上方显示清晰的环。保留原生语义、点击目标和关闭行为。
5. 先交付纯色版本。 声明不透明填充色与文字颜色的配对，然后在 @supports 中增强效果。提供应用级纯色模式；明确支持减少透明度、强制颜色、减少动态效果和打印。
6. 仅在弯曲效果能体现厚度时添加折射。 小型控件（按钮、旋钮、胶囊形控件）可通过 backdrop-filter: url() 使用基于几何形状生成的位移贴图；它仅在 Chromium 中渲染，且必须能降级为磨砂效果。卡片保持磨砂效果。

尽量减少实时背景滤镜的数量、覆盖面积和重叠：每个视图使用一到三个玻璃表面，导航层计为一个，其上最多叠加一个临时面板。玻璃是装饰层，不是内容层；绝不要玻璃叠玻璃（在外壳内使用有色面板），绝不要为模糊效果设置动画，默认不要对整个视口应用滤镜。不要在同一屏幕混用 Apple 的常规和透明材质层级；较大的表面应显得比小型控件更厚。

验证所需结果

运行实际界面并使用项目的检查项进行验证，在浏览器或原生模拟器中检查有代表性的状态。只检查变更涉及的范围：仅涉及 CSS 的视觉变更需要 UI 检查，而不是一套将样式固定下来的新测试。

• **视觉：**材质在预期尺寸下清晰可辨；边缘、高光和阴影的光源方向一致；在明暗和繁简不同的背景下（包括热点以及文字后方的高对比度图形），层次关系依然清晰；在移动设备上不会变成覆盖全屏的模糊效果。
• **功能：**每个控件都支持键盘焦点和指针操作；菜单、加载、错误和禁用状态依然易于理解；装饰元素不会拦截输入或裁切焦点。
• **无障碍：**测量字形笔画与文字背后渲染合成图像的对比度（隐藏文字、对该区域采样，并取最差百分位），并在允许的最差背景下进行测试。在实验室中，适配模式下标题的中位对比度为 5.7:1 至 15:1，次要文字为 4.8:1 至 9.9:1；同一张柔和色调照片上，浅色调背景上的白色文字对比度为 1.7:1，这正是切换模式的原因。验证纯色、强制颜色、减少动态效果和 320px 宽度下的重排状态。
• **渲染：**在目标引擎上测试真实滚动、调整大小、叠加层和动态效果；成本不确定时，关闭滤镜进行对比。特性检测只能证明语法有效，不能证明呈现效果一致。

在负责的层级修复问题：添加底板或更改文字颜色以改善对比度；缩小应用滤镜的区域以降低成本；修复祖先元素的合成问题以解决模糊缺失。不要将添加模糊、z-index 或 translateZ(0) 当作修复方案。

交付成品，说明已执行的检查，并披露未测试的引擎、设备和实验性效果。研究结果可作为设计和工程指导，但不能证明可用性有所提升。