box-shadow中应使用rgba()或hsla()直接定义带透明度的颜色，避免用opacity影响整体阴影效果；注意模糊半径、多层叠加、渲染顺序及IE兼容性问题。
box-shadow 里怎么写带透明度的颜色
直接在 box-shadow 的颜色部分用 rgba() 或 hsla() 就行，别用十六进制加 opacity —— 那样会把整个阴影（包括偏移、模糊、扩散）一起变淡，不是你想要的“颜色透明”。
常见错误是写成：box-shadow: 0 2px 4px rgba(0,0,0,0.3) 看起来没问题，但实际中容易忽略两点：一是模糊半径太小导致边缘生硬，二是没考虑多层阴影叠加时透明通道的混合行为。
-
rgba(0, 0, 0, 0.15)比rgba(0, 0, 0, 0.3)更接近真实设计稿的“微妙投影” - 深色背景上用
hsla(0, 0%, 100%, 0.08)可避免纯白阴影发灰 - 不要对同一元素叠写多个
box-shadow并都设高透明度，浏览器会逐层合成，可能比预期更浓
和 background-color 透明共存时的渲染顺序
box-shadow 绘制在元素背景之上，但**不参与 background 的层叠上下文**。也就是说，即使你给 background-color 设了 rgba(255, 255, 255, 0.9)，阴影仍按自身 alpha 独立计算，不会被背景“稀释”或“遮盖”。
真正影响视觉的是 stacking context：如果父容器有 opacity: 0.99 或 transform，整个子元素（含 shadow）会被压平一层，此时阴影透明度会和父级叠加 —— 这常被误认为是 shadow 自身问题。
立即学习“前端免费学习笔记（深入）”；
- 想让阴影穿透父级透明效果？改用
will-change: transform或提升 z-index 不起作用，得去掉父级opacity - 用
backdrop-filter模糊背景时，box-shadow不受影响，它只作用于元素自身盒模型 - IE 不支持
rgba()在box-shadow中，必须降级为filter: drop-shadow()（但后者不支持内阴影）
内阴影 inset + 透明色的典型写法
inset 关键字必须紧跟在偏移值之后，透明色写在最后。顺序错了浏览器会整个声明失效。
box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.08),
inset 0 2px 4px rgba(255, 255, 255, 0.1);
这种双内阴影常用于模拟“浮起感”按钮，注意两点：
- 两个
inset阴影不能共用一个颜色值，否则上下边缘会打架；通常一深一浅、一上一下 - 模糊值（第三个参数）建议 ≥2px，小于 1px 在 Retina 屏上几乎不可见
- 别用
inset模拟 border —— 边缘会有轻微羽化，不如border锐利
替代方案：filter: drop-shadow() 的适用边界
当你要对 PNG 图标、SVG 或文字阴影做透明处理，且不需要精确控制 x/y 偏移时，filter: drop-shadow() 更可靠 —— 它基于图像 Alpha 通道生成阴影，能自然绕过锯齿和半透明区域。
但它不接受 inset，也不响应 border-radius 裁剪（阴影永远按原始轮廓投射），更没法像 box-shadow 那样写多层。
- 图标类元素优先用
drop-shadow(0 1px 2px rgba(0,0,0,0.15)) - 文字阴影别混用
text-shadow和drop-shadow，后者开销大且不可控 - Chrome 下
drop-shadow在will-change: transform元素上可能闪烁，需加transform: translateZ(0)强制 GPU 加速
