最可靠方案是用 box-shadow 模拟虚化边框，因 border 本身不支持模糊，filter: blur() 会模糊整图，border-radius 只能圆角，outline 不支持模糊且定位受限；需设 display: inline-block/block 才生效，推荐 box-shadow: 0 0 8px 2px rgba(0,0,0,0.25)，PNG 透明图则用 filter: drop-shadow()。

直接用 box-shadow 模拟虚化边框最可靠，border 本身不支持模糊，硬加 border-radius 或 filter: blur() 会连图片一起糊掉。

为什么不能对 border 本身做模糊

CSS 的 border 是硬边几何线，没有“模糊半径”概念；给整个 img 加 filter: blur(1px) 会让图像主体失真，不是边缘虚化。浏览器也不允许单独对 border 层应用高斯模糊。

• border-radius 只能圆角，不能柔化边缘过渡
• outline 不支持模糊，且无法控制内外位置
• 试图用 box-shadow: 0 0 4px 2px #000 给 img 加“发光边框”，但默认 img 是 inline 元素，阴影根本不会渲染

box-shadow 实现柔和边框的关键三步

本质是用带扩散和模糊的阴影“包住”图片，视觉上形成一层软边。前提是先解决 img 的显示模式问题。

• 必须设 display: inline-block 或 display: block，否则 box-shadow 无效
• 推荐写法：box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.25) —— 第四个值 2px 是扩散距离，让阴影“撑开”贴合边框感；第三个值 8px 控制模糊程度，太小（如 2px）像描边，太大（如 20px）像光晕
• 颜色用透明度适中的深灰（如 rgba(33, 33, 33, 0.3)），比纯黑更自然；避免用 hsla() 配色，部分 Safari 对 alpha 渲染不稳定

PNG 透明图要按真实轮廓虚化？换 filter: drop-shadow()

当图片有不规则透明边缘（比如头像、图标），box-shadow 仍按矩形盒子投射，会在透明区域外多出一圈模糊块。这时必须用 drop-shadow。

立即学习“前端免费学习笔记（深入）”；

• 写法：filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3))，参数顺序和 box-shadow 一致，但只沿 Alpha 通道边缘模糊
• 注意：drop-shadow 不支持 inset，也不能和 blur() 叠加使用（会相互干扰）
• 兼容性：Chrome 53+、Firefox 45+、Safari 10.1+、Edge 16+ 都支持；IE 完全不支持，需降级为 box-shadow

容易被忽略的细节：尺寸缩放与 DPR 补偿

在 Retina 或 Windows 高缩放屏上，box-shadow: 0 0 4px 1px 可能被渲染成毛刺状或过重——这不是代码错，是设备像素比（DPR）导致的采样偏差。

• 稳妥做法：把模糊值和扩散值都设为偶数（如 6px / 2px），减少亚像素渲染抖动
• 若图片做了 width: 100%; height: auto 响应式缩放，box-shadow 不会随比例变化，虚化强度会相对变弱；此时建议配合媒体查询微调：@media (-webkit-min-device-pixel-ratio: 2) { img { box-shadow: 0 0 12px 3px rgba(0,0,0,0.25); } }
• 别给 img 同时加 border 和 box-shadow，两者叠加会让边缘发虚又生硬，选其一即可