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 加速