box-shadow多层写法必须用逗号拼接在同一声明中，否则后声明覆盖前声明导致错位失效；所有层需统一偏移值（如0 0），外层大模糊低透明模拟光晕，内层小模糊略暗边模拟玻璃折射，配合transparent背景、细边框与border-radius及overflow:hidden实现通透玻璃感。
box-shadow 多层写法错位导致玻璃感失效
直接重复声明 box-shadow 会覆盖前值，只留最后一层——这是玻璃态按钮发虚、不聚焦的最常见原因。比如写成：
button {
box-shadow: 0 0 10px rgba(255,255,255,0.2);
box-shadow: 0 0 20px rgba(255,255,255,0.1);
}
结果只有第二层生效，失去“内外光晕叠加”的玻璃厚度。正确做法是用逗号拼接所有层：
button {
box-shadow:
0 0 8px rgba(255,255,255,0.15),
0 0 16px rgba(255,255,255,0.08),
0 0 24px rgba(0,0,0,0.05);
}
- 所有层必须用相同偏移（如全为
0 0），否则阴影错位，玻璃边缘发散 - 外层模糊值大、透明度低（模拟远距离光晕）；内层模糊小、略带暗边（模拟玻璃折射边缘）
- 别漏逗号——换行时尤其容易丢，语法错误会导致整条声明被浏览器忽略
border 配合透明背景才显玻璃通透感
纯色 background + border 只是描边按钮，不是玻璃态。玻璃的核心是“能看到背后内容”，所以必须用 background: transparent 或极低 alpha 的 rgba()。
此时 border 就不只是轮廓线，而是玻璃的“物理边界”：
立即学习“前端免费学习笔记（深入）”；
-
border: 1px solid rgba(255,255,255,0.2)比0.1更稳，太淡易消失；比0.3更轻，太重像塑料框 - 圆角
border-radius: 12px必须配合overflow: hidden，否则box-shadow溢出破坏整体感 - 若按钮有图标（如 Font Awesome），
color建议设为rgba(255,255,255,0.8)，避免文字和玻璃边抢视觉焦点
backdrop-filter blur 在移动端的实际兼容性坑
backdrop-filter: blur(8px) 是玻璃态的灵魂，但它在 Safari 15.4+ 和 Chrome 97+ 才稳定支持，iOS 微信内置浏览器至今不认这个属性。
线上项目不能只靠它撑效果，得降级：
- 先写
background: rgba(255,255,255,0.08)保底，至少有半透感 - 再加
@supports (backdrop-filter: blur(1px))块包裹backdrop-filter，避免老浏览器解析失败崩溃 - Android WebView 里
blur值超过10px容易卡顿，建议控制在6–8px
hover 动画掉帧？别直接 transition box-shadow
多层 box-shadow + 大模糊值在 hover 时实时重绘，GPU 负载高，尤其低端安卓机明显卡顿。
真正轻量的做法是只动两处：
- 把
box-shadow的模糊值从16px→12px（减量不减质） - 同步微调
border-color透明度，比如从rgba(255,255,255,0.2)→rgba(255,255,255,0.3)，视觉上更“聚光” - 过渡用
transition: border-color 0.2s ease, box-shadow 0.2s ease，避开 layout 触发
玻璃态按钮最难的从来不是怎么发光，而是怎么让光“不飘、不糊、不卡”。每层阴影的数值差、每个 rgba 的小数点后一位、每个 transition 的毫秒数，都得亲手调，截图对比才行。
