drop-shadow()支持rgba()控制阴影颜色透明度，但不支持整体opacity；其alpha仅作用于颜色通道，非图层叠加，且移动端旧webview对rgba()兼容不稳定，建议用hsla()或十六进制带alpha写法。
drop-shadow() 本身不支持 alpha 通道控制
直接写 filter: drop-shadow(10px 10px 15px rgba(0,0,0,0.3)) 是可行的，但要注意：这里的 rgba() 只控制投影颜色透明度，**不是控制投影整体 opacity**。它渲染的是一个带 alpha 的纯色投影，视觉上确实“半透”，但底层逻辑仍是硬边+模糊，不是叠加一层可调透明度的图层。
移动端兼容性必须验证 drop-shadow() + rgba()
Android 4.4+ 和 iOS Safari 均支持 drop-shadow()，但部分旧版 WebView（如 Android 4.4–5.0 的系统浏览器）对 rgba() 在 drop-shadow() 中的支持不稳定——可能渲染为全黑或完全不显示。实测建议：
- 用
hsla()替代rgba()（如hsla(0,0%,0%,0.3)），兼容性略好 - 在 iOS 上优先用十六进制带 alpha 的写法：
#0000004D（最后两位是 0.3 的十六进制近似值） - 真机调试时，务必检查 Chrome DevTools 的 “Rendering” 面板是否启用 “Emulate CSS media features”，避免模拟器误判
想微调投影强度？别碰 opacity，改 blur-radius 和颜色明度
给元素加 opacity: 0.8 会连同投影一起变淡，这不是你想要的“仅投影变淡”。真正可控的方式是：
- 减小
blur-radius（比如从15px降到6px），让投影更锐利、视觉上更“集中”，显得更实 - 降低颜色明度：用
rgba(0,0,0,0.2)比rgba(0,0,0,0.5)更轻；或改用浅灰如#999配合小 blur - 避免在父容器上叠
opacity—— 它会把整个渲染层压暗，包括投影边缘的渐变细节
投影“发虚”或“断开”？检查 PNG 图像的 Alpha 边缘
移动端 WebKit 渲染引擎对 PNG 的 Alpha 渐变边缘敏感。如果投影看起来碎裂、有白边或局部缺失，大概率是原图导出时没做“Alpha 预乘”（Premultiplied Alpha）：
- 用 Sketch / Figma 导出 PNG 时勾选 “Export with alpha pre-multiplied”
- Photoshop 中保存为 PNG-24，取消勾选 “Interlace”（隔行扫描）
- 用命令行工具验证：
file your-icon.png应显示 “PNG image data, 32 bit/color RGBA”
没预乘的 PNG 在 drop-shadow() 下容易产生边缘撕裂，尤其在 iOS 上更明显——这不是 CSS 写错，是资源本身问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
