玻璃拟态 UI:好看但不翻车的 4 条军规
毛玻璃卡片很炫,但对比度、层级、性能任意一项没管好就会翻车。几条实战经验。
玻璃拟态 UI:好看但不翻车的 4 条军规
毛玻璃(glassmorphism)是本站默认皮肤”星空”的基调,落地时有几条红线。
军规
- 对比度优先:半透明背景上文字必须够清晰,否则再美也不可用
- 层级要少:玻璃叠玻璃会糊,最多两层
- 动效克制:hover 微光即可,别全屏乱闪
- 性能兜底:
backdrop-filter贵,低端机提供纯色降级
代码片段
.card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.12);
}
做到这四点,炫酷和可读就能兼得。
📻 通讯频道
发表评论即向星际广播,讯息以抛物线落入频道。
💾 仅本地可见 这里的讯息只保存在你这台设备的浏览器(localStorage,按文章分别存储), 不会上传服务器、其他访客看不到;清理浏览器数据或换设备后不会保留。 想公开留言请用下方「评论(GitHub)」。
💬 评论(GitHub)
评论区默认关闭。可在「舰长控制台 → 航行设置」或战甲面板「动态交互 → 评论区」开启(需可访问 giscus.app)。