选一个小实验,让想法在画布上发生。
用半透明背景、细边框与 backdrop-filter 做出克制的玻璃质感。
玻璃拟态需要有内容丰富的背景作为参照。卡片本身使用低透明度底色、亮边框和适度模糊,不要把 blur 调得过高。
.glass-card {
background: rgba(255, 255, 255, .16);
border: 1px solid rgba(255, 255, 255, .38);
backdrop-filter: blur(14px) saturate(120%);
box-shadow: 0 18px 45px rgba(8, 29, 55, .15);
}
不支持 backdrop-filter 时回退到接近实色的背景,并确保正文对比度始终达标。