Image Inner Border

鹏展博

339字约1分钟

2023-08-10

Image inner border

在处理用户头像时，以清晰的方式显示它们，并且与视图很好的保持统一性，可能具有一定的挑战性。因为有些头像的亮度很高，有些头像的亮度很低，又有可能有些是 jpg 格式，有些是 png 格式，对透明度的支持不一，就很可能与背景色混合在一起。

avatar.png

avatar.jpg

由于头像存在透明部分，导致与背景色融合在一起，看不出来头像的 UI 为圆形，与其它的部分失去了整体性。

对此，我们可以增加边框，可以让 UI 看起来更为舒服。

.avatar {
  position: relative;
}
.avatar::after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  display: block;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #000;
  opacity: 0.1;
}

avatar.png

avatar.jpg