首选 box-shadow 实现软边，因其仅渲染外围阴影而不模糊图片内容；png 等透明图须用 drop-shadow() 沿 alpha 边缘柔化；需注意 display、dpr 适配及父容器 overflow 干扰。
不能用 border 直接模糊，也不能对整张图加 filter: blur() —— 那样会糊掉图片内容本身。真正靠谱的做法是用 box-shadow 模拟“软边”，或对 PNG 等透明图用 filter: drop-shadow() 跟随 Alpha 边缘。
为什么 box-shadow 是首选方案
浏览器不支持给 border 加模糊，filter: blur() 作用于整个元素，会把图像主体也变虚；而 box-shadow 只渲染一层外围阴影，不干扰图片像素。它本质是用扩散+模糊的阴影“包住”图片，视觉上形成柔和边缘。
- 必须先设
display: inline-block或display: block，否则img默认为inline，阴影根本不会渲染 - 推荐写法：
box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.25)—— 第三个值（8px）控制模糊程度，第四个值（2px）是扩散距离，让阴影“贴合”边框感 - 避免纯黑：
rgba(33, 33, 33, 0.3)比rgba(0, 0, 0, 0.25)更自然；hsla()在部分 Safari 中 alpha 渲染不稳定，慎用
filter: drop-shadow() 什么时候必须用
当图片有不规则透明边缘（比如 PNG 头像、图标），box-shadow 仍按矩形盒子投射，会在透明区域外多出一圈模糊块。这时只能换 drop-shadow()，它只沿 Alpha 通道边缘模糊。
- 写法：
filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3))，参数顺序和box-shadow一致，但不支持inset，也不能和blur()叠加（会相互干扰） - 兼容性：Chrome 53+、Firefox 45+、Safari 10.1+、Edge 16+ 支持；IE 完全不支持，需降级回
box-shadow - 注意：
drop-shadow()不受border-radius影响，它只认像素轮廓 —— 所以圆角 PNG 也能精准柔化真实边缘
高 DPR 屏幕下虚化发毛？调偶数参数 + 媒体查询补偿
在 Retina 或 Windows 高缩放屏上，box-shadow: 0 0 4px 1px 可能被渲染成毛刺状或过重——这不是代码错，是设备像素比（DPR）导致的亚像素采样偏差。
- 稳妥做法：把模糊值（第三个参数）和扩散值（第四个参数）都设为偶数，如
6px/2px或8px/2px，减少抖动 - 如果图片用了
width: 100%; height: auto响应式缩放，box-shadow不会随比例变化，虚化强度会相对变弱 → 建议配合媒体查询微调：@media (-webkit-min-device-pixel-ratio: 2)下增大模糊值 -
drop-shadow()同样受 DPR 影响，但表现通常比box-shadow更稳定，尤其在 Safari 中
容易被忽略的细节：父容器与 overflow 干扰
即使样式写对了，也可能看不到效果——常见原因不在图片本身，而在父级布局。
- 父容器设了
overflow: hidden，但阴影超出范围被裁剪 → 解决方案：要么扩大父容器 padding，要么改用clip-path替代overflow - 图片嵌套在
div里，只给div加了border-radius，没给img加 → 圆角和阴影都无效，必须直接作用于img元素 -
img是inline元素时，底部默认留白（基线对齐），会导致圆角“漏底” → 加vertical-align: top或display: block即可修复
真正麻烦的不是写哪行代码，而是判断该用 box-shadow 还是 drop-shadow() —— 关键就看图片有没有透明区域。一旦选错，效果就失真，而且很难一眼看出问题在哪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
