如何用CSS为PNG图片实现hover时的5px白色描边？

你用drop-shadow出现单侧显示、褪色的问题，是因为只设置了右下方向的偏移，且模糊半径太大导致边缘虚化。给你几个实用的解决方案：

方案一：多方向drop-shadow叠加（最简单） #

给四个方向都添加无模糊的drop-shadow，模拟完整实色描边，不会出现褪色：

img:hover {
  filter: 
    drop-shadow(-5px 0 0 #ffffff)
    drop-shadow(5px 0 0 #ffffff)
    drop-shadow(0 -5px 0 #ffffff)
    drop-shadow(0 5px 0 #ffffff);
}

如果想要柔和一点的边缘，可以给每个阴影加1px模糊半径，比如drop-shadow(-5px 0 1px #ffffff)。

方案二：伪元素描边（适配复杂形状） #

如果头像形状不规则，用伪元素复制一层白色头像放大后放在底层，效果更精准：

/* 给图片套个父容器 */
.img-wrapper {
  position: relative;
  display: inline-block;
  overflow: visible; /* 防止描边被截断 */
}

.img-wrapper:hover::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('你的头像路径') no-repeat center/contain;
  filter: brightness(0) invert(1); /* 转成纯白色 */
  transform: scale(1.1); /* 放大10%露出5px描边，可按需调整 */
  z-index: -1;
}

方案三：outline（仅适合矩形头像） #

如果头像是标准矩形，用outline最省事：

img:hover {
  outline: 5px solid #ffffff;
  outline-offset: 2px; /* 可选：让描边和图片留空隙 */
}

注意这个方法不适合圆形或不规则形状，因为outline是矩形的，会破坏原有轮廓。

内容的提问来源于stack exchange，提问作者Richardson