直接给标签加border-radius: 50%难以实现稳定胶囊形，根本原因是其默认inline显示导致高度基准不可控，须采用语义结构+display: inline-flex+显式height+box-sizing: border-box+border-radius: 999px等组合策略才能可靠落地。
直接给 <a></a> 标签加 border-radius: 50% 基本做不出稳定胶囊形——不是圆角不生效，就是文字偏位、可访问性丢失或 Safari 下抖动。真正能落地的胶囊导航，靠的是语义结构 + 盒模型对齐 + 圆角策略组合。
为什么 border-radius: 50% 在导航项上常失效
根本原因不是 CSS 写错了，而是浏览器按盒模型宽高分别计算 50%，而导航项通常是 display: inline 或 inline-block，实际高度受 line-height、padding、字体大小和行内对齐方式共同影响，导致“高度”基准不可控。
-
border-radius: 50%要求宽 ≥ 高，且左右圆角半径必须严格等于高度一半；但<a></a>默认没有显式height，浏览器按内容撑开，这个“高”会随字号、行高、缩放动态变化 - 用
line-height垂直居中时，若没配height，border-radius的计算基准就错位，圆角被拉扁或塌陷 - Safari（尤其 iOS）对
50%的重排更敏感，1px 偏差就让半圆变椭圆 - 直接给
<li>或<div> 加圆角，会破坏语义和键盘焦点流，屏幕阅读器无法识别导航意图<h3>正确结构：用 <code><nav><ul><li><a></a></li></ul></nav>套路 +inline-flex胶囊导航不是视觉糖，是语义+样式双达标的结果。必须用标准导航结构，再用
display: inline-flex替代老式float或inline-block布局，才能稳控高度与圆角对齐。-
<nav></nav>包裹整个导航，声明语义，支持aria-label和屏幕阅读器识别 -
<ul></ul>保持列表语义，不能换成<div> 或一堆 <code><button></button> -
<a></a>必须存在，即使跳转 JS 处理，也要保留href（可用href="#"+event.preventDefault()） -
<a></a>设为display: inline-flex，再配align-items: center和显式height，文字自动垂直居中，且高度基准可控 - 避免给
<li>设宽高，它只负责包裹，所有尺寸控制集中在<a></a>上 - 固定高宽按钮（如图标按钮）：
border-radius: 20px（假设height: 40px），硬编码最稳，兼容所有浏览器 - 文字长度不确定的常规导航项：
border-radius: 999px—— 浏览器自动截断为最大合法值，视觉上就是两端半圆，不依赖具体像素，响应式友好 - 需兼顾 Safari 稳定性：
border-radius: calc(50% - 1px)，比纯50%少 1px 容错，防重排抖动 - 禁用写法：
border-radius: 50% 0 0 50%这类不对称写法在<a></a>上极易错位；border-radius: 50%单独使用，在width 时会变椭圆 - 用
padding控制文字左右呼吸感，别设固定width；例如padding: 0 24px比width: 120px更健壮 - 必须加
box-sizing: border-box到<a></a>，否则padding会让总宽超出预期，圆角被挤压变形 - 悬停/聚焦状态必须加
outline或自定义焦点环，且不能用outline: none全局抹掉——否则键盘用户无法感知当前焦点 - 选中态（
.active或:focus）建议用背景色+阴影强化，别只改文字颜色，对比度要满足 WCAG AA 标准
border-radius的三种可靠写法及适用场景别死磕
50%。根据按钮宽度是否固定、文本长度是否多变，选不同策略：立即学习“前端免费学习笔记（深入）”；
容易被忽略的细节：内边距、盒模型与可访问性
很多“胶囊”看着像，一交互就露馅——点击区域小、焦点框错位、缩放后圆角崩坏。问题往往出在 padding 和 box-sizing 没对齐。
胶囊形不是调出来的，是算出来的：左右圆角半径必须 ≤ 高度一半，且不能超过宽度一半；一旦数值失衡，就不是胶囊，是鼓包或塌陷。动手前先确认
height、line-height、padding三者关系是否闭环。 -
