box-shadow的颜色透明度（如rgba的alpha）仅控制颜色不透明度，不影响扩散范围；扩散由spread-radius决定，模糊程度由blur-radius控制，调阴影应先固定后两者再调整alpha。
box-shadow 的颜色参数本身不支持透明度关键字
很多人以为 box-shadow 里写 rgba(0, 0, 0, 0.3) 或 hsla(0, 0%, 0%, 0.3) 就能控制阴影“扩散强度”，其实这是误解——rgba 和 hsla 控制的是**颜色本身的不透明度**，不是“扩散范围”。扩散程度由第四个长度值（即 spread-radius）决定，它和颜色透明度无关。
常见错误现象：
– 阴影看起来“发虚”“糊边”，其实是 blur-radius 太大，不是透明度问题
– 改了 rgba 透明度但阴影边缘没变锐利，说明混淆了 blur 和 opacity 的作用
-
box-shadow: 0 2px 8px 0 rgba(0,0,0,0.15)→ 模糊 8px，无扩散，半透黑 -
box-shadow: 0 2px 4px 2px rgba(0,0,0,0.1)→ 模糊 4px，向外扩散 2px，更淡但更“厚” - 想让阴影更“收拢”，优先减小
blur-radius，而不是调低 alpha 值
用 rgba/hsla 而不是 transparent 或 #000000 是为了精确控色
虽然 transparent 看似省事，但它等价于 rgba(0,0,0,0)，无法微调灰阶浓度；而纯黑 #000 又太重。真正可控的方式是固定色相+明度，只调 alpha：
- 深灰阴影推荐：
rgba(0, 0, 0, 0.12)（卡片浮层）、rgba(0, 0, 0, 0.2)（按钮按压） - 浅底色上避免用纯黑，改用
hsla(0, 0%, 20%, 0.1)更柔和 - 不要用
rgb(0,0,0)+ 单独 opacity —— CSS 不支持这种写法，会失效
多层 box-shadow 叠加时，alpha 值不是线性叠加
两个 box-shadow: 0 0 10px rgba(0,0,0,0.1) 叠在一起，视觉上不会变成 0.2，因为浏览器按像素混合渲染，实际效果接近 0.19 左右（取决于抗锯齿和子像素渲染）。这意味着：
- 别靠堆叠多个低 alpha 阴影来“模拟更大扩散”——不如直接增大
spread-radius - 若需上下/内外双阴影（如内凹+外凸），务必分开定义，例如：
box-shadow: inset 0 -2px 4px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.1) - 移动端 WebKit 渲染下，过多 layer 可能触发性能警告，建议单元素不超过 3 层
扩散半径（spread-radius）为负值时的颜色表现很关键
负的 spread-radius（如 -2px）会让阴影向内收缩，此时如果颜色 alpha 值过高，容易在元素边缘形成生硬的“黑边”。这不是 bug，而是光效逻辑导致的视觉强化。
- 负扩散慎用高 alpha：
box-shadow: 0 0 0 -1px rgba(0,0,0,0.3)容易显脏，改用0.12更安全 - 常用于描边替代方案：配合
border: 1px solid使用时，负扩散阴影要略淡于边框色，否则抢视觉 - 圆角元素上用负扩散，注意
border-radius和spread-radius的数值匹配，否则角落会断裂
blur-radius 是否过大、或是否意外叠加了伪元素的阴影。调一个阴影，先锁死 spread-radius 和 blur-radius，再动 alpha。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
