box-shadow 多层叠加实现光泽感的原理
光泽感本质是模拟高光+阴影的物理反射，CSS 里靠 box-shadow 的多层偏移和透明度控制来骗过人眼。不是加得越多越好，通常 2–3 层足够：一层紧贴边缘的浅色高光（正偏移、小模糊），一层稍远的深色压暗（负偏移、稍大模糊），可能再加一层极淡的底层衬托。
容易踩的坑：box-shadow 层叠顺序是从后往前画（类似 CSS 绘图栈），写在前面的 shadow 反而盖在最上面；颜色没用 rgba() 控制透明度会导致高光发灰、不透亮；所有 shadow 都设了 inset 就变成内凹按钮，光泽感直接消失。
实际可用的三层 box-shadow 写法
下面这个组合在多数背景色下都出效果，重点看参数逻辑：
button {
background: #4a90e2;
box-shadow:
0 -2px 8px rgba(255, 255, 255, 0.4), /* 顶部高光：上偏移，白+高透明 */
0 2px 6px rgba(0, 0, 0, 0.15), /* 底部微影：下偏移，黑+低透明 */
0 0 0 1px rgba(0, 0, 0, 0.08); /* 边框强化：无偏移，细线，补轮廓感 */
}- 第一层
0 -2px 8px rgba(255, 255, 255, 0.4)是关键——负垂直偏移把高光“提”到按钮上方边缘，像被光照亮的弧面 - 第二层
0 2px 6px rgba(0, 0, 0, 0.15)模拟环境遮蔽，让按钮看起来“坐”在界面上，不是浮着的 - 第三层
0 0 0 1px rgba(0, 0, 0, 0.08)不是必须，但在浅色背景或 Retina 屏上能稳住边缘清晰度
不同背景色下要调什么
光泽感强弱严重依赖对比。深色按钮配浅背景时，高光用更白、更透明的 rgba(255, 255, 255, 0.5)；浅色按钮配深背景时，高光反而要降饱和、偏冷（比如 rgba(255, 255, 255, 0.3) 或 rgba(240, 245, 255, 0.4)），否则像贴了反光胶带。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：box-shadow 在深色背景上看不见——大概率是用了纯黑 rgba(0, 0, 0, 0.2) 而不是带一点蓝灰的暗影（如 rgba(30, 30, 50, 0.15)）；按钮边缘发虚——模糊值（第三个数字）超过 8px，在小尺寸按钮上会吃掉细节。
移动端和高DPI屏要注意的兼容点
安卓 WebView 和旧版 Safari 对多层 box-shadow 渲染有性能抖动，尤其配合 transition 时。实操建议：
- hover 状态只改其中一层（比如只动高光层的
opacity或transform: translateY()），别整个重绘所有 shadow - Retina 屏上，
1px边框实际是 2 物理像素，第三层边框强化可改成0 0 0 0.5px（支持的浏览器会自动缩放） - 避免在
@keyframes动画里逐帧修改box-shadow值——浏览器无法硬件加速，卡顿明显
真正难的是让光泽在按钮尺寸变化、文字换行、禁用态切换时不突兀。这些地方没法靠一套 shadow 通吃，得结合 :disabled 单独降 opacity，或者用 background-image: linear-gradient 做底层渐变打底——但那就不是纯 box-shadow 能解决的事了。
