|
|
| 第1行： |
第1行： |
| <div class="avatar-frame">[[File:face_character_{{{1|}}}.png|link=]]<div class="avatar-name">{{{2|}}}</div></div> | | <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; /* 右上角圆角 */
| |
| }
| |
| }}
| |
