应使用 rgba() 而非十六进制透明色控制阴影 alpha，因其跨浏览器兼容、混合行为可预测；三层阴影需按模糊半径递减、alpha 递增（如 0.04/0.07/0.1）且顺序不可颠倒；深色背景宜改用白底反光色；inset 阴影 alpha 需更低且避免叠加。
直接用 rgba() 控制每层阴影的 alpha 值，别碰 opacity、别混用十六进制透明色、别把多层写反顺序——否则看着“淡”，实则发灰发脏，层次全糊掉。
为什么 rgba(0,0,0,0.1) 比 #0000001a 更可靠
浏览器对十六进制带 alpha（如 #0000001a）的解析不一致：Chrome 支持，Firefox 旧版本会降级为纯黑，Safari 在某些渲染路径下可能截断精度。而 rgba(0,0,0,0.1) 是 CSS 标准语法，所有现代引擎都按规范解析第四个参数。更关键的是，alpha 值参与后续混合计算（比如遇上 backdrop-filter），rgba() 的行为可预测，#rrggbbaa 则容易在复合场景中“意外变淡”或“突然变实”。
-
rgba(0,0,0,0.1)在白底上≈视觉明度 90%，在深灰底上≈75%，变化平滑 -
#0000001a在 Firefox 中可能被当作#000渲染，直接失去透明度 - 调试时用 DevTools 修改
rgba()的第四个值，能实时看到线性变化；改十六进制 alpha 往往要刷新才生效
三层细腻阴影怎么配参数才不糊
不是“越层数多越高级”，而是靠模糊半径与 alpha 的反向梯度制造空气感：外层虚、淡、远；内层实、略深、紧贴。写反了，比如把 rgba(0,0,0,0.15) 放最后，它会盖住前面所有柔光层，变成一块硬边灰斑。
- 第一层（最外）：
0 8px 32px rgba(0,0,0,0.04)—— 大模糊+极低透明度，模拟环境散射 - 第二层（中层）：
0 4px 16px rgba(0,0,0,0.07)—— 中等模糊，透明度稍提，撑起主体体积 - 第三层（最内）：
0 2px 4px rgba(0,0,0,0.1)—— 小模糊+相对最高 alpha，定义清晰边界 - 三者 alpha 比例建议控制在 1 : 1.75 : 2.5 范围内，避免中间层“塌陷”失重
深色背景上阴影突然看不见？不是 shadow 写错了
同一段 box-shadow: 0 2px 4px rgba(0,0,0,0.08)，在 background: white 下可见，在 background: #1e1e1e 下几乎隐形——因为人眼对明度差的感知被压缩了。这不是 bug，是颜色混合的物理事实。
立即学习“前端免费学习笔记（深入）”；
- 深色背景优先换色相：用
rgba(255,255,255,0.06)替代黑灰，模拟反光而非遮挡 - 别盲目提高 alpha：从 0.08 直跳到 0.2 会破坏细腻感，先试
rgba(255,255,255,0.08)+ 同等模糊 - 加一层
isolation: isolate到父容器，排除 backdrop-filter 或 mask 的干扰，确认是 shadow 本身问题还是叠加异常 - 移动端 OLED 屏对低 alpha 更不友好，
rgba(0,0,0,0.05)在 iPhone 上常不可见，建议下限设为 0.06
inset 阴影和外阴影混搭时最容易翻车
写成 box-shadow: inset 0 0 10px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.08) 看似合理，但内阴影的高 alpha 会吃掉外层柔光，导致卡片像被压进屏幕里，失去“浮出”感。
- inset 层必须用更低 alpha：外阴影
rgba(0,0,0,0.08)对应 inset 推荐 ≤rgba(0,0,0,0.04) - inset 的模糊值不宜过大：超过
12px容易让内边缘“溶化”，破坏结构感 - 绝对避免
inset和inset叠加：两层内阴影会互相污染，产生奇怪的明暗噪点 - 如果真需要强内凹效果，宁可用
border+linear-gradient模拟，也别堆inset
真正细腻的阴影，藏在 alpha 值小数点后第二位的取舍里——0.07 在 Safari 里可能被四舍五入成 0.05，0.12 在 Firefox 中又可能渲染为 0.1，所以关键参数尽量避开 0.03/0.07/0.13 这类边界值。
