胶囊导航本质是CSS实现，无原生HTML标签；需用语义化结构，配合border-radius、flex布局与可访问性状态样式实现。
胶囊导航本质是 CSS 实现，不是 HTML 标签
HTML 里没有 <capsule-nav></capsule-nav> 或类似原生标签。所谓“胶囊导航”，指的是视觉上两端圆润、内部文字居中、常带选中高亮的横向导航条，完全靠 <nav></nav> + <ul></ul> + <li> + <a></a> 结构配合 CSS 实现。
常见错误是试图用 <button></button> 或 <div> 堆样式却忽略语义和可访问性；正确做法是保留导航结构语义，再用 CSS 控制形状。
<ul>
<li>必须用 <code><nav></nav> 包裹，对屏幕阅读器友好
<a></a>（即使跳转到锚点或 JS 处理），不要用 <span></span> 或 <div>
<li>胶囊感核心在 <code>border-radius：左右两端设为高度一半，例如 height: 32px → border-radius: 16px
<a></a> 设固定宽高，优先用 padding 控制内边距，让文字撑开容器更健壮实现圆角+内边距+水平居中的关键 CSS 规则
胶囊形状不靠 clip-path 或伪元素遮罩，最简稳定方案就是 display: inline-flex 或 display: flex 配合 border-radius 和 padding。
下面这段 CSS 能直接复用：
立即学习“前端免费学习笔记（深入）”；
.capsule-nav {
display: flex;
gap: 8px;
}
.capsule-nav a {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 20px;
height: 36px;
border-radius: 18px;
background: #f0f0f0;
color: #333;
text-decoration: none;
font-size: 14px;
transition: all 0.2s;
}
.capsule-nav a:hover,
.capsule-nav a.active {
background: #007bff;
color: white;
}
-
gap替代margin控制项间距，避免外边距合并问题 -
inline-flex让<a></a>既保持行内流式布局，又能用align-items垂直居中 - 若需响应式收缩，把
padding改成min-width+padding组合，防小屏文字溢出 - 别用
line-height垂直居中——在 flex 容器里它不可靠，尤其遇到图标或上下标时
点击态/选中态容易漏掉的可访问性细节
只加 :hover 和 .active 不够。键盘用户按 Tab 进入链接后，焦点框（:focus）必须可见，否则 WCAG 2.1 AA 不达标。
- 必须显式定义
a:focus样式，不能依赖浏览器默认（通常太细或被覆盖） - 推荐用
outline: 2px solid #007bff+outline-offset: 2px，比box-shadow更轻量且兼容老浏览器 - 如果用了
outline: none，务必补上:focus-visible回退逻辑，否则键盘操作完全不可见 - 移动端点击反馈缺失？加
*:active { opacity: 0.8; }或用touch-action: manipulation提升响应灵敏度
IE11 兼容或需要伪元素微调圆角时的备选方案
极少数场景下，比如要兼容 IE11（不支持 gap 或 flex 子项 justify-content），就得降级处理。
此时可用 float: left + margin-right 模拟间隙，并用伪元素修正首尾圆角：
.capsule-nav li:first-child a { border-top-left-radius: 18px; border-bottom-left-radius: 18px; }
.capsule-nav li:last-child a { border-top-right-radius: 18px; border-bottom-right-radius: 18px; }
- 不要用
:first-of-type或:last-of-type，它们匹配的是元素类型，不是位置 - 如果导航项动态增删，用 JS 切换
.first/.last类比纯 CSS 更稳 - 伪元素（
::before/::after）做胶囊头尾仅限装饰性需求，比如加小圆点或渐变过渡，别用来承载交互或内容
真正难的不是画出胶囊形状，而是让它的交互状态在各种输入方式（鼠标、键盘、触屏）、各种缩放比例、各种辅助技术下都一致可用。圆角只是表象，语义结构和状态反馈才是落地关键。
