胶囊形导航需语义化结构（nav+ul+li+a）配合css控制，单设a的border-radius易失败；正确做法是a用inline-flex、align-items:center、height与border-radius匹配，并用999px替代50%确保圆角稳定。
超链接本身不能直接“做成胶囊形状”，必须用 <a></a> 套在语义正确的容器里，再靠 CSS 控制外形——否则要么圆角失效，要么文字偏位，要么可访问性崩溃。
为什么直接给 <a></a> 加 border-radius 常失败
常见错误是写成这样：
<a href="#" style="border-radius: 20px; padding: 8px 16px;">首页</a>
问题出在三点：
-
<a></a>默认是行内元素，border-radius对行内元素的垂直方向渲染不可控（尤其 Safari） - 没设
display: inline-block或display: flex，导致height和line-height不参与盒模型计算 - 没配
box-sizing: border-box，padding 会撑大实际宽高，让border-radius: 50%算错基准
正确做法：用 <nav> + <ul> + <li> + <a></a>
</li>
</ul></nav> 结构
胶囊导航本质是语义化结构 + CSS 形状控制，不是单个 <a></a> 的样式堆砌。必须这样写：
<nav><ul>
<li><a href="#home">首页</a></li>
<li><a href="#about">关于</a></li>
</ul></nav>
对应关键 CSS（可直接复用）：
-
nav ul：用display: flex横向排列，gap: 8px控制间距 -
nav li：不设宽高，让内容撑开；加list-style: none -
nav a：设display: inline-flex（兼顾居中与盒模型）、align-items: center、justify-content: center、height: 36px、line-height: 36px、border-radius: 18px（= height / 2） - 别漏
box-sizing: border-box和text-decoration: none
文字视觉偏高？检查 line-height 和 vertical-align
即使写了 height: 40px 和 line-height: 40px，文字仍可能看起来偏上，因为：
- 字体自身的
baseline位置不同（如中文和英文混排时更明显） -
<a></a>是行内级，vertical-align默认是baseline，不是middle - 父级
<li>如果用了display: flex，子项<a></a>的vertical-align就被忽略
稳妥解法：把 <a></a> 设为 display: inline-flex，再加 align-items: center——它比 line-height 更可靠，且不依赖字体度量。
响应式下胶囊变形？优先用 border-radius: 999px 而非 50%
在移动端或缩放场景，border-radius: 50% 容易因渲染精度偏差变成椭圆或塌边。实测更稳的写法是：
- 宽 ≥ 高的常规按钮：
border-radius: 999px（浏览器自动截断为合法最大值，两端恒为半圆） - 需要兼容旧 Safari：
border-radius: calc(50% - 1px) - 绝对避免用固定像素值（如
24px），除非你 100% 控制了所有设备上的font-size和zoom
胶囊形不是调出来的，是尺寸关系对齐后自然出现的——高度、line-height、border-radius 三者必须咬合，差 1px 都可能破形。最易被忽略的是：它只在左右方向生效，上下圆角永远受限于高度，所以别指望用它做竖向胶囊。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
