查看“︁战斗员图鉴/个/小”︁的源代码

<div class="avatar-frame">[[File:face_character_{{{1|}}}.png|link=]]<div class="avatar-name">{{{2|}}}</div></div>
{{#css:
.avatar-frame {
    position: relative;
    display: inline-block;
    border: 3px solid #ccc; /* 灰色边框 */
    border-radius: 5px; /* 轻微圆角 */
    overflow: hidden; /* 确保内容不超出边框 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 轻微阴影增加层次感 */
    background: #f5f5f5; /* 浅灰色背景作为图片加载前的占位 */
}

.avatar-frame img {
    display: block;
    width: 100px;
    height: 100px;
    object-fit: cover; /* 确保图片比例正确 */
}

.avatar-name {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 2px 8px;
    color: white;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 0 0 2px black, 0 0 2px black; /* 白色描边效果 */
    white-space: nowrap; /* 防止文字换行 */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis; /* 文字过长显示省略号 */
    border-top-right-radius: 3px; /* 右上角圆角 */
}
}}