许多开发者在设置 `box-shadow` 时，一旦涉及颜色透明度就容易踩坑。直接给出结论：要让阴影颜色带透明度，唯一可靠的写法是 `rgba(0, 0, 0, 0.2)` 或 `hsla(0, 0%, 0%, 0.2)`。不要为了省事使用 `#0004`，这种写法在 Chrome/Edge 中属于实验性语法，Firefox 完全不支持，线上阴影会直接消失。`transparent` 同样不可行，它会被解析为 `rgba(0,0,0,0)`，效果等同于没有阴影。
box-shadow 的颜色透明度如何正确书写
核心要点只有三个：括号内红绿蓝值与 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 很低，阴影依然是硬边，没有过渡效果
很多人以为调低 alpha 就能让阴影变模糊，这完全是两码事。模糊依赖的是 `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.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`）作为阴影色，因为在深色模式下它可能比背景还亮
深色模式下阴影容易“消失”，`rgba(0,0,0,0.1)` 在白色背景上可见，在黑色背景上几乎不可见——这不是 bug，而是对比度崩了。别只在默认主题下调阴影，切到深色模式后要单独适配。可用 `@media (prefers-color-scheme: dark)` 覆盖颜色，比如改成 `rgba(255,255,255,0.08)`。避免用固定灰度值（如 `#ccc`）做阴影色，它在深色模式下可能比背景还亮。
最常被忽略的其实是渲染层级：给元素加了 `transform` 或 `backdrop-filter` 后，阴影可能被裁剪或发虚，这时候需要检查是否意外触发了层叠上下文。
