模板

模板:战斗员图鉴/个/小

来自卡厄思梦境WIKI

律Rhyme留言 | 贡献2025年10月6日 (一) 19:23的版本 (创建页面,内容为“<div class="avatar-frame">[[File:face_character_{{{1|}}}.png|link=]]<div class="avatar-name">{{{2|}}}</div></div> 头像框容器样式:​ .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 {

   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; /* 右上角圆角 */

}