HTML导航布局制作圆角胶囊菜单的教程-html教程-PHP中文网

直接给标签加border-radius: 50%难以实现稳定胶囊形，根本原因是其默认inline显示导致高度基准不可控，须采用语义结构+display: inline-flex+显式height+box-sizing: border-box+border-radius: 999px等组合策略才能可靠落地。

html导航布局制作圆角胶囊菜单的教程

直接给标签加 border-radius: 50% 基本做不出稳定胶囊形——不是圆角不生效，就是文字偏位、可访问性丢失或 Safari 下抖动。真正能落地的胶囊导航，靠的是语义结构 + 盒模型对齐 + 圆角策略组合。

为什么 `border-radius: 50%` 在导航项上常失效

根本原因不是 CSS 写错了，而是浏览器按盒模型宽高分别计算 50%，而导航项通常是 display: inline 或 inline-block，实际高度受 line-height、padding、字体大小和行内对齐方式共同影响，导致“高度”基准不可控。

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