css grid可实现头像与介绍等高响应式卡片：grid-template-rows: auto 1fr确保头像自适应、文字占满剩余空间；用background-image兜底默认头像；纯css控制文字截断与展开；语义化结构需用、、及可访问按钮。
用 CSS Grid 实现头像+介绍的等高响应式卡片布局
直接用 display: grid 控制团队成员区域，比 Flexbox 更容易保证每张卡片高度一致——尤其当介绍文字行数不同时，Flexbox 容易导致头像上下偏移，Grid 可以让头像和文字在各自轨道里对齐。
关键点：grid-template-rows: auto 1fr 把头像设为自适应高度，介绍文字区域强制占满剩余空间，避免文字少时卡片塌陷：
.team-card {
display: grid;
grid-template-rows: auto 1fr;
gap: 0.75rem;
min-height: 180px; /* 防止过小设备上文字挤在一起 */
}
- 别用
align-items: center全局居中，它会让头像和文字一起垂直居中，反而破坏阅读流 - 头像统一用
<img>+width/height: 100%+object-fit: cover，避免拉伸变形 - 移动端建议设
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr))，比固定列数更健壮
头像图片加载失败时显示默认占位符（无 JS）
不用监听 onerror 或写 JS fallback，纯 HTML/CSS 就能兜底：把默认头像作为 background-image，再用 <img> 叠在上面。只要图片加载失败，img 会退化为一个空内联元素，背景自然透出。
<div class="avatar-placeholder" style="background-image: url(/img/default-avatar.svg)"> @@##@@ </div>
- CSS 中给
.avatar-placeholder设width、height和background-size: cover -
<img src="/img/team/alice.jpg" alt="Alice Chen">必须设width: 100%; height: 100%，否则无法覆盖整个容器 - 别用
background: url(...) no-repeat center / cover简写——某些老浏览器解析有差异，分开写更稳
介绍文字截断与展开控制（纯 CSS 可选）
“更多”链接不是必须加 JS；用 :checked + <input type="checkbox"> 隐藏控件，配合 max-height 过渡就能实现收起/展开。前提是介绍文字得包在单独容器里，且初始状态限制行高。
<label class="bio-toggle"> <input type="checkbox"><span class="bio-content">...</span> <span class="toggle-label">更多</span> </label>
-
.bio-content初始设display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden -
input:checked ~ .bio-content改为max-height: 300px; transition: max-height 0.3s ease-out - 注意：iOS Safari 对
-webkit-line-clamp的动画支持差，展开后若内容超长，优先保障可读性而非动效
语义化结构与无障碍访问要点
每个成员区块必须是独立的 <article></article>，不是 <div>。头像用 <code><img> 时 alt 值不能是“头像”或空字符串，要写真实姓名+角色，比如 alt="Zhang Wei, Frontend Lead"。
- 介绍文字外层用
<dl></dl>包裹更合适：<dt></dt>写职位，<dd></dd>写描述，比段落更清晰 - “更多”按钮必须是
<button></button>或带role="button"的标签，且用aria-expanded同步状态 - 别依赖颜色区分信息层级——比如用灰色字标职位，需额外加图标或字体粗细变化
最常被忽略的是焦点管理：键盘 Tab 切换时，确保头像、姓名、职位、展开按钮都能依次获得焦点，且焦点样式可见。不然视障用户根本不知道这个模块还能交互。
