如何用CSS设置阴影的颜色和透明度

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 后，阴影可能被裁剪或发虚，这时候得检查是否意外触发了层叠上下文。