box-shadow 中直接使用 rgba() 颜色值（如 rgba(0,0,0,0.3)）即可控制阴影透明度，无需 wrapper 或 opacity；alpha 范围为 0–1，语法错误、父级 opacity、过小模糊值、CSS 优先级或 Safari inset 兼容性可能导致失效；多层阴影用逗号分隔，filter: drop-shadow() 可避免 transform 缩放影响但不支持 inset。
box-shadow 里直接用 rgba() 就行
不需要额外 wrapper 或 opacity，box-shadow 的第四个参数（模糊半径）后面可以紧跟一个 rgba() 颜色值，其中 alpha 通道就控制阴影透明度。浏览器原生支持，所有现代浏览器都 OK。
-
rgba(0, 0, 0, 0.3)表示带 30% 不透明度的黑色阴影 - 别写成
rgb(0,0,0,0.3)—— 缺少a就是语法错误，会被整个box-shadow声明忽略 - alpha 值范围是
0（全透）到1（不透），不是百分比数字
常见错误：阴影变“糊”或“消失”
写了 rgba() 却没看到半透明效果？大概率是下面几个原因：
- 用了
opacity在父元素上 → 这会让整个元素（含内容）一起变透明，不是只阴影 - 阴影偏移量（x/y）设为
0且模糊值太小（比如1px），人眼几乎看不出 - CSS 优先级被覆盖，检查 computed styles 确认生效的是你写的那条
box-shadow - 在 Safari 旧版本中，如果用了
inset+rgba()，某些组合可能渲染异常（建议加filter: drop-shadow()作降级）
完整写法示例（含多层阴影）
button {
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.1),
0 4px 12px rgba(0, 0, 0, 0.15);
}
注意逗号分隔多层阴影；每层可独立设颜色和透明度；第一层浅、第二层深，能做出更自然的立体感。
想让阴影“不随元素缩放”？用 filter: drop-shadow()
如果元素用了 transform: scale(0.8)，box-shadow 会跟着缩放变细弱；这时换用 filter: drop-shadow() 更稳：
立即学习“前端免费学习笔记（深入）”；
button {
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}
drop-shadow() 是滤镜，不受 transform 影响，但不支持内阴影（inset），也不能像 box-shadow 那样叠多层 —— 场景不同，选对就行。
box-shadow 是否解析成功，比反复改数值更省时间。 
