Avatar 设计文档
头像：支持图片(src/srcSet)、加载失败降级到 children/alt 首字，circle/square 形状，7 档尺寸(默认 medium)或自定义 width，16 档语义色 + white(默认 grey)，字符按 gap 自适应缩放，hoverMask 悬浮遮罩，topSlot/bottomSlot 对象配置的顶部/底部标记，border 额外描边环 + contentMotion 内容动效。Avatar.Group 把多个头像层叠排列，maxCount 折叠出「+N」溢出头像，overlapFrom 控制压盖方向，组级 shape/size 强制下发(对齐 Semi cloneElement)。
← API 文档使用建议
头像：支持图片(src/srcSet)、加载失败降级到 children/alt 首字，circle/square 形状，7 档尺寸(默认 medium)或自定义 width，16 档语义色 + white(默认 grey)，字符按 gap 自适应缩放，hoverMask 悬浮遮罩，topSlot/bottomSlot 对象配置的顶部/底部标记，border 额外描边环 + contentMotion 内容动效。Avatar.Group 把多个头像层叠排列，maxCount 折叠出「+N」溢出头像，overlapFrom 控制压盖方向，组级 shape/size 强制下发(对齐 Semi cloneElement)。
Accessibility
- 图片头像用 <img alt>；纯文字头像 role=img + aria-label(alt 或文字)。提供 onClick 时内部 img/label 加 tabindex=0 + 键盘 Enter/Escape(对齐 Semi clickable Avatar)；纯展示头像不可聚焦。
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-avatar-additional-border-color | var(--cd-color-avatar-additional-border) | 额外描边环颜色（组件消费） |
--cd-avatar-amber-bg | var(--cd-color-avatar-amber-bg) | amber 头像背景（组件消费） |
--cd-avatar-bg | var(--cd-color-fill-1) | 文字/缺省头像背景（组件消费；Semi 头像文字底为 fill） |
--cd-avatar-blue-bg | var(--cd-color-avatar-blue-bg) | blue 头像背景（组件消费） |
--cd-avatar-border | var(--cd-color-avatar-default-border-default) | 头像组描边颜色（组件消费） |
--cd-avatar-bottom-slot-bg | var(--cd-color-avatar-bottom-slot-bg) | 底部 Slot 背景色（组件消费） |
--cd-avatar-bottom-slot-square-border | var(--cd-color-avatar-bottom-slot-square-border) | 底部方形 Slot 边框色（组件消费） |
--cd-avatar-bottom-slot-text | var(--cd-color-avatar-bottom-slot-text) | 底部 Slot 文字色（组件消费） |
--cd-avatar-color | var(--cd-color-text-1) | 头像文字颜色（组件消费） |
--cd-avatar-cyan-bg | var(--cd-color-avatar-cyan-bg) | cyan 头像背景（组件消费） |