box-shadow 的 color 参数支持 rgba() 透明度控制，需直接使用 rgba(r,g,b,a) 格式设置 alpha 值，而非额外添加 opacity；多层阴影需为每层单独指定 rgba，且与 backdrop-filter 等叠加时 alpha 会参与混合计算。
box-shadow 的 color 参数支持 rgba()，不是加 opacity
很多人试过给 box-shadow 设置 opacity 或用 transparent 混合颜色，结果阴影要么全透明、要么根本不生效——因为 box-shadow 的颜色值本身就能带透明度，根本不需要额外套一层透明控制。
真正起作用的是把颜色写成 rgba(0, 0, 0, 0.3) 这种形式：前三个数是 RGB 通道，第四个是 alpha（0～1），直接决定阴影的“色深”和透光程度。
-
rgba(0, 0, 0, 1)是纯黑不透明，阴影最重 -
rgba(0, 0, 0, 0.1)是极淡灰影，适合轻量卡片浮层 - 别用
hsla()或hex + opacity组合，浏览器不认那种写法 - alpha 值低于 0.05 时，多数屏幕下基本看不见，慎用
多个阴影叠加时，每个 rgba() 独立生效
当你写多层 box-shadow（比如外扩+内陷+高光），每一段阴影的颜色都得单独配 rgba，不能只在最后加一个全局透明度。
例如：box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.08), 0 0 0 2px rgba(0,128,255,0.2);
- 第一段是基础浅灰投影，第二段稍远稍虚，第三段是蓝色描边光晕
- 三个
rgba()的 alpha 互不影响，可分别调深浅 - 如果统一想变淡，必须挨个改每个 rgba 的第四个参数，没有捷径
- Chrome 和 Safari 对小数点后两位（如
0.07）渲染一致，Firefox 有时会四舍五入到0.05或0.1，微调时建议避开0.07、0.03这类边界值
和 backdrop-filter / mask 配合时，rgba 透明度会参与混合计算
如果你在有毛玻璃（backdrop-filter: blur(10px)）或遮罩（mask）的容器里投阴影，rgba() 的 alpha 不仅影响阴影自身，还会跟背景做叠加运算，导致实际看到的阴影比预期更淡。
- 这种情况下，
rgba(0,0,0,0.2)可能看起来像0.12左右的浓度 - 调试技巧：临时关掉
backdrop-filter，确认阴影本体是否符合预期 - 若必须共存，建议把阴影 alpha 提高 1.5 倍再试（比如原想用
0.12，先试0.18） - 注意：这种混合行为在 Safari 中更明显，Chrome 相对稳定
不要用 filter: drop-shadow() 替代 box-shadow 来控透明度
filter: drop-shadow() 看起来也能投阴影，但它底层是图像滤镜，颜色参数不支持 rgba，只接受十六进制或命名色，且透明度由整个 filter 整体控制，无法精细调节单个阴影层。
-
filter: drop-shadow(0 2px 4px #000)—— 没法设透明度 -
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2))—— 大部分浏览器忽略 alpha，仍当不透明处理 - 它适合给不规则形状（如 SVG、PNG 透明图）投影，但控色深必须回到
box-shadow + rgba - 性能上，
filter是 GPU 加速，但多次叠加易触发重绘；box-shadow在现代浏览器中优化更好，尤其静态阴影
实际调参时，最常被忽略的是 alpha 值和设备像素比的交互：Retina 屏下，0.08 和 0.1 的差异肉眼几乎不可分，不如直接选 0.1 或 0.15 这类整数步进值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
