box-shadow颜色透明度应使用rgba()或hsla()函数，如rgba(0,0,0,0.15)，避免#0004等非标准写法；模糊靠blur-radius实现，非透明度；多层阴影需参数错开；深色模式需配合prefers-color-scheme调整颜色。
box-shadow 的颜色透明度怎么写才有效
直接写 rgba(0, 0, 0, 0.3) 或 hsla(0, 0%, 0%, 0.3) 就行，别用 #00000080（这种十六进制带 alpha 的写法在部分旧浏览器里不认，比如 IE 和某些安卓 WebView）。
常见错误是抄了别人代码里的 #0004，以为这是标准写法——其实它只是 Chrome/Edge 新版支持的实验性语法，Firefox 目前完全不解析，部署后阴影直接消失。
-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15)✅ 安全、通用、可控 -
box-shadow: 0 2px 8px #0004❌ Firefox 下无阴影，CI 检查可能不报错但线上失效 - 如果要用 CSS 变量控制透明度，记得变量值也得是
rgba()形式，不能只存个数字然后拼字符串
模糊半径（blur-radius）和透明度的关系
模糊过渡不是靠“调低透明度”实现的，而是靠 blur-radius 值本身——它决定阴影边缘像素如何扩散混合。透明度只是控制整体可见强度，不影响软硬程度。
比如 box-shadow: 0 0 1px rgba(0,0,0,0.9) 是一圈极细但浓重的边；而 box-shadow: 0 0 20px rgba(0,0,0,0.1) 才是真正柔和的大片晕染。两者视觉差异极大，但新手常误以为“透明度越低越模糊”。
立即学习“前端免费学习笔记（深入）”；
- 想让阴影更“融”进背景：加大
blur-radius，同时适当降低透明度（比如从0.3降到0.12），避免灰蒙蒙一片 - 移动端慎用超大
blur-radius（如 >30px），某些低端安卓机渲染卡顿或出现锯齿 -
blur-radius为0时，阴影就是硬边矩形，再低的透明度也没过渡效果
多层 box-shadow 怎么叠出自然渐变阴影
单层 box-shadow 无法做出「近处深+远处淡」的纵深感，必须叠加至少两层：一层小偏移+中等模糊+稍高透明度，一层大偏移+大模糊+低透明度。
典型错误是两层都用相同 blur-radius，结果看起来像双影或发虚。关键在参数错开：
- 第一层：
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，是颜色对比度崩了。
解决方式不是改 JS 切换 class，而是用 color-scheme + CSS @media (prefers-color-scheme: dark) 做响应式适配：
button {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
@media (prefers-color-scheme: dark) {
button {
box-shadow: 0 2px 8px rgba(255, 255, 255, 0.08);
}
}
- 别偷懒用
hsl(0,0%,0%,0.1)—— 它在深色模式下还是黑，没意义 - 深色模式下推荐用白/浅灰+低透明度，而不是“调亮黑色”，因为人眼对暗背景上的浅色更敏感
- 如果你用的是 CSS-in-JS 或原子化工具（如 Tailwind），确认它生成的深色模式类是否真覆盖了
box-shadow，有些工具默认只处理color和background
模糊过渡的本质是像素混合，不是颜色变化。调来调去没效果时，先看 blur-radius 是否为 0，再检查透明度单位是否被浏览器忽略——这两点占了八成问题。
