drop-shadow 能识别元素实际像素轮廓并生成贴合边缘的阴影，而 box-shadow 始终以矩形边界框投射阴影；前者适用于透明背景图像且视觉更自然，后者则忽略内容透明度与形状细节。
在CSS中，drop-shadow 和 box-shadow 虽然都能创建阴影效果，但它们在颜色处理和渲染方式上有本质区别，尤其是在涉及透明度和元素形状时表现明显。
box-shadow 颜色基于指定值，不考虑元素实际像素
box-shadow 使用你设置的颜色直接绘制矩形阴影，它围绕的是元素的边界框（包括border-box），不会识别元素内部的透明区域或圆角以外的形状细节。
- 即使元素有透明背景或png透明区域，阴影仍按完整矩形生成
- 颜色完全由你定义，比如
box-shadow: 5px 5px 10px blue;就是纯蓝色阴影 - 无法感知元素内部图像的实际轮廓
drop-shadow 遵循元素真实像素，颜色受合成影响
drop-shadow() 是滤镜（filter）的一部分，它会分析元素渲染后的实际不透明像素来生成阴影，因此能“看到”透明背景中的图形轮廓。
- 只对不透明区域投射阴影，适合带透明通道的PNG图像或使用border-radius裁剪的内容
- 颜色虽然是设定的，但因为作用于整个渲染图像，可能看起来更自然、融合更好
- 例如：一个圆形头像（带透明背景），用 drop-shadow 会产生贴合边缘的阴影，而 box-shadow 会是方形外框
常见颜色表现差异场景
假设有一个半透明红色（rgba(255,0,0,0.5)）的圆形图片：
立即学习“前端免费学习笔记（深入）”；
- box-shadow 设置为黑色：产生一个完整的矩形黑影，与元素透明度无关
- drop-shadow(black 5px 5px 5px)：阴影跟随实际红色像素边缘，且由于原图半透明，整体视觉上阴影也显得略微柔和或叠加感更强
基本上就这些。关键在于：box-shadow 忽略内容细节，而 drop-shadow 尊重渲染后的像素轮廓，这使得两者在颜色呈现和阴影位置上会有直观差别。
