SuperAPI AI 工具集

glass-morphism

设计与创作

查看项目

更新于 10-15 21:12

技能介绍

玻璃拟态(Glassmorphism)是一种界面视觉模式,通过半透明背景、背景模糊与细边框营造磨砂玻璃质感,常用于悬浮于视觉内容之上的界面元素。

适用场景:浮动工具栏或导航栏叠加在图像内容之上;覆盖在图片背景上的卡片;媒体应用中的状态栏与覆盖层;保留背景上下文的模态遮罩。

不适用场景:纯色背景下使用没有意义,因为没有可透出的背景;可读性受损时不应使用;过度使用会让所有元素都失去视觉重量;在低性能设备上 backdrop-filter 开销较高。

基础实现示例: .glass { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 12px; }

实现规则:始终添加半透明边框以界定边缘;背景不透明度建议 5% 至 20%,越高玻璃感越弱;模糊半径建议 12px 至 24px,过小会显得噪杂,过大则接近实心;确保文字对比度在最差背景条件下仍满足 WCAG;为不支持 backdrop-filter 的浏览器提供回退方案;应在多种背景上测试,因为效果变化明显。

资料未提供该技能的安装方式、收费模式、平台限制和具体使用步骤。