必须用display: inline-flex替代float或inline-block制作胶囊导航，配合显式height、box-sizing: border-box、border-radius: 999px及语义化结构，才能稳定实现横向分段对齐与两端半圆效果。
用 display: inline-flex 控制胶囊按钮横向分段对齐
直接给 <ul></ul> 加 float: left 或 display: inline-block 做胶囊导航，会因基线对齐、行高浮动导致高度不一致，左右圆角错位。必须用 display: inline-flex 替代，配合显式 height 和 align-items: center 才能稳住垂直中心与圆角基准。
关键点：
-
<nav><ul></ul></nav>结构不可省，语义和可访问性依赖它；<div> 或 <code><span></span>包裹链接会丢失键盘焦点流 -
ul上设height: 44px（或你定的固定值），再配box-sizing: border-box，避免 padding 撑高 -
li不设宽，靠flex: 1或margin: 0 8px分隔；若需等宽，用flex: 1+min-width: 0防文字撑爆 - 文字居中必须靠
line-height: 44px+vertical-align: middle，仅靠padding在 Safari 中易偏高 - 固定高宽按钮（如图标按钮）：
border-radius: 22px（假设height: 44px），硬编码最稳 - 文字长度不确定的常规项：
border-radius: 999px，浏览器自动截断为最大合法值，视觉即两端半圆，响应式友好 - Safari 兼容性要求高时：
border-radius: calc(50% - 1px)，比纯50%少 1px 容错，防重排抖动 - 禁用：
border-radius: 50% 0 0 50%这类不对称写法，li宽度不一就会错位 - 加
transition: transform 0.2s ease-out，且必须指定属性，别写transition: all - 悬停时用
transform: translateY(-2px) scale(1.015)，scale超过1.03易致文字模糊 - 高频交互按钮加
will-change: transform，但别全局加，否则内存泄漏风险上升 - 阴影必须两层：
box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.15)，单层看着平、没立体感 -
ul加flex-wrap: wrap（大屏）+flex-direction: column（小屏），避免文字被截断 -
li设width: 100%或flex: none，防止 flex 自动分配宽度导致错位 - 汉堡菜单点击后，用
transform: translateX(0)展开，别用display: block，否则触发布局抖动 - 深色主题下，阴影颜色改用
rgba(0,0,0,0.2)，纯黑在暗背景下像贴了胶布
border-radius 写法选错，胶囊就变椭圆
border-radius: 50% 在胶囊按钮上基本不可用——它按宽高分别算 50%，而导航项宽度随文字变化，高度却固定，结果左圆角是半圆、右圆角被拉扁。真能落地的只有三种写法：
悬停动效别碰 margin，用 transform 才顺滑
很多教程教用 margin-top: -2px 实现“浮起”效果，但会触发 layout（重排），尤其在低端安卓 WebView 里卡顿明显。正确做法是只走合成层：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
移动端折叠前，先关掉 inline-flex 的换行陷阱
媒体查询切到小屏时，display: inline-flex 默认不换行，li 会被压缩甚至溢出。不能只靠 flex-direction: column，还得处理三件事：
胶囊导航最难的不是圆角，而是让所有浏览器在缩放、字体变化、屏幕阅读器聚焦时，高度基准始终一致。一旦漏掉 box-sizing: border-box 或 line-height 与 height 同值，Safari 和 iOS VoiceOver 就会立刻暴露问题。
