Image Inner Border
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
