box-shadow的颜色值必须显式写在参数末尾（或inset之后），不可省略；标准语法为h-offset v-offset blur-radius spread-radius color | inset，颜色影响阴影透光率，与blur-radius作用不同，深色模式需手动适配，drop-shadow()则按图形轮廓渲染且不支持inset。
box-shadow 的颜色参数写在哪
颜色值必须放在 box-shadow 值的最后（或倒数第二，如果带了 inset），不能省略，也不能只写偏移量就默认用黑色——浏览器不会自动补色，没写就是透明黑（视觉上接近纯黑，但 alpha 通道存在）。
标准语法是：box-shadow: h-offset v-offset blur-radius spread-radius color | inset。其中 color 是可选但强烈建议显式指定的，否则依赖浏览器默认（通常是 rgba(0,0,0,0.2) 类似值，但不统一）。
- 错误写法：
box-shadow: 2px 2px 4px;→ 颜色未声明，结果不可控 - 正确写法：
box-shadow: 2px 2px 4px 0 #6366f1;（尾部明确加#6366f1） - 带
inset时，color要放在inset后面：box-shadow: inset 0 -2px 4px #ec4899;
RGBA 颜色对阴影透明度的实际影响
用 rgba() 写颜色，比如 rgba(99, 102, 241, 0.5)，和直接用 blur-radius 控制虚化是两回事：前者控制阴影本体的透光率，后者控制边缘柔和程度。两者叠加会明显削弱视觉重量。
常见误判是“加了 blur 就不用调 alpha”，其实不然——高 blur + 高 alpha 容易发灰、糊成一片；低 blur + 低 alpha 又可能看不见。推荐组合：
立即学习“前端免费学习笔记（深入）”；
- 强调层级感（如卡片浮起）：
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);（多层、不同 alpha） - 强调聚焦（如按钮按下）：
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);（仅 spread，无 blur，靠 alpha 控制轻重） - 避免用
hsla()或transparent开头——transparent渲染为全透明，等于没加阴影
阴影颜色在深色模式下的兼容性问题
CSS 自身不感知系统主题，box-shadow 颜色写死就会在深色背景下显得过亮或突兀。别指望它自动适配，得手动处理。
可行方案只有两个：
- 用
@media (prefers-color-scheme: dark)覆盖：.card { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } @media (prefers-color-scheme: dark) { .card { box-shadow: 0 2px 8px rgba(255, 255, 255, 0.08); } } - 用 CSS 自定义属性 + JS 动态切换（适合主题频繁切换场景），但注意：CSS 变量不能直接在
box-shadow里做颜色计算，得提前定义好暗色版本变量，例如--shadow-color-dark: rgba(255, 255, 255, 0.08); - 别用
currentColor混淆——它取的是文字颜色，和阴影语义无关，容易导致意外高对比
filter: drop-shadow() 和 box-shadow 的颜色行为差异
二者都出阴影，但颜色渲染逻辑完全不同：box-shadow 是围绕元素矩形框投射，颜色受 spread 和 blur 影响均匀；而 filter: drop-shadow() 是基于元素实际 Alpha 通道（即图形轮廓）生成阴影，颜色只作用于“有像素”的区域边缘。
这意味着：
- 圆角图片、SVG 或带透明背景的 PNG，用
drop-shadow()才能贴合形状；box-shadow仍按矩形框来，四角会漏出 -
drop-shadow()不支持inset，也不支持多层逗号分隔——只能单层，颜色必须紧跟在偏移后：filter: drop-shadow(0 4px 8px #8b5cf6); - 性能上，
drop-shadow()是 GPU 加速滤镜，复杂图形下比多重box-shadow更卡，尤其在滚动容器里慎用
box-shadow 值的具体位置里；漏写、错位、依赖默认，都会让效果偏离预期。深色模式和图形轮廓这两个点，最容易在线上环境突然暴露。 
