头像框皮肤

头像框（ElementType.AvatarFrame）由头像图片、框图片和标题文字组成，三者绝对定位叠放。源码 src/components/DrawEl/el-avatar-frame.vue。

规范

直接写裸 CSS，不加任何外层选择器：写 .title { ... }、.avatar { ... } 即可，系统会自动把它 scope 到本皮肤。
别动 width / height / left / top：头像、框、标题的位置和尺寸由面板的 avatarBox / titleBox 结构字段控制，CSS 改了会被内联样式覆盖。
背景保持透明：根容器无底色，框图片本身就是装饰。
z-index 层级：头像 z-index: 1、框 z-index: 2、标题 z-index: 3，皮肤可调整但注意别让标题被框遮住。
动画：@keyframes 写在顶层、名字带本皮肤前缀以免撞名。给 .frame 或 .avatar 加旋转/脉冲动效很常见。

DOM 结构

html

<div class="avatar-frame">
  <img class="avatar" src="..." />
  <img class="frame" src="..." />
  <div class="title">MVP-紫嫣</div>
</div>

标题（.title）在 titleContent 为空时不渲染。

类名	含义
`.avatar-frame`	根容器（`position: relative`，裁剪溢出）
`.avatar`	头像图片（`position: absolute`，`object-fit: cover`）
`.frame`	框图片（`position: absolute`，`inset: 0`，`object-fit: contain`，`pointer-events: none`）
`.title`	标题文字（`position: absolute`，`font-weight: 700`）

示例

标题加发光描边、框加旋转光环：

css

.avatar-frame {
  border-radius: 12px;
}

.title {
  font-weight: 700;
  text-shadow:
    0 1px 4px rgba(0, 0, 0, 0.9),
    0 0 12px rgba(255, 200, 80, 0.5);
}

.frame {
  filter: drop-shadow(0 0 8px rgba(255, 200, 80, 0.4));
}

@keyframes zbj-frame-breathe {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(255, 200, 80, 0.4)); }
  50% { filter: drop-shadow(0 0 16px rgba(255, 200, 80, 0.7)); }
}

.frame {
  animation: zbj-frame-breathe 2s ease-in-out infinite;
}

想偷懒？用 AI 帮你写皮肤一键生成带规范的提示词。

头像框皮肤 ​

规范 ​

DOM 结构 ​

示例 ​

头像框皮肤

规范

DOM 结构

示例