box-shadow颜色透明度必须用rgba()或hsla()函数，如rgba(0,0,0,0.2)，禁用#0004（Firefox不识别）和transparent（解析为全透明无阴影）；blur-radius控制模糊程度，alpha仅调节整体强度。
box-shadow 里颜色带透明度，必须用 rgba() 或 hsla()，别写 #0004 或 transparent——后者不生效，前者在 Firefox 里直接失效。
box-shadow 的颜色透明度怎么写才有效
直接写 rgba(0, 0, 0, 0.2) 或 hsla(0, 0%, 0%, 0.2) 就行。关键点有三个：
- 括号内红绿蓝值和 alpha 值之间必须用逗号分隔，函数外和其他参数（偏移、模糊半径）用空格分隔
-
#0004是 Chrome/Edge 实验性语法，Firefox 完全不识别，线上阴影会消失 -
transparent不等于 “带透明度的黑色”，它会被解析为rgba(0,0,0,0)，结果就是没阴影
blur-radius 和透明度不是一回事
模糊靠 blur-radius 值本身控制，不是靠调低 alpha。常见误解是“透明度越低越模糊”，其实：
-
box-shadow: 0 0 1px rgba(0,0,0,0.9)是一圈硬边浓影 -
box-shadow: 0 0 20px rgba(0,0,0,0.1)才是真正柔和的大片晕染 - 想让阴影“融”进背景：先加大
blur-radius，再适当降低 alpha（比如从0.3降到0.12） -
blur-radius为 0 时，再低的 alpha 也是硬边，没有过渡
多层阴影叠加时透明度怎么算
多个 box-shadow 是逐层绘制，不是简单相加。视觉上更接近乘法叠加：
立即学习“前端免费学习笔记（深入）”；
- 两层
rgba(0,0,0,0.2)叠在一起，实际效果接近0.2 × 0.2 = 0.04，显得过淡 - 第二层 alpha 建议设为
0.3–0.4，而不是照搬第一层 - 典型写法：
0 2px 6px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.08) - 顺序不能反：深色层必须写在前面，否则会被浅色层盖住
深色模式下阴影容易“消失”的原因
rgba(0,0,0,0.1) 在白色背景上可见，在黑色背景上几乎不可见——这不是 bug，是对比度崩了。
- 别只在默认主题下调阴影，切到深色模式后要单独适配
- 可用
@media (prefers-color-scheme: dark)覆盖颜色，比如改成rgba(255,255,255,0.08) - 避免用固定灰度值（如
#ccc）做阴影色，它在深色模式下可能比背景还亮
最常被忽略的其实是渲染层级：给元素加了 transform 或 backdrop-filter 后，阴影可能被裁剪或发虚，这时候得检查是否意外触发了层叠上下文。
