HTML胶囊按钮怎么写？border-radius极限值设置-html教程-PHP中文网

胶囊按钮需设border-radius等于高度一半（如高40px则20px），左右padding≥该值以防截断，禁用line-height，避免50%导致椭圆变形，推荐固定像素值确保稳定。

html胶囊按钮怎么写？border-radius极限值设置

胶囊按钮的 HTML + CSS 实现要点

直接用 border-radius 把按钮左右两端撑圆，就能做出标准胶囊形状——关键不是“怎么写”，而是半径值怎么设才不翻车。

最稳妥写法是：左右内边距（padding-left / padding-right）必须 ≥ 高度的一半，然后 border-radius 设为高度一半。例如按钮高 40px，左右 padding 至少 20px，border-radius: 20px。

如果 padding-left 或 padding-right 小于高度一半，右/左圆角会被截断，视觉上变成“半胶囊”甚至直角
不要用 border-radius: 50% —— 它依赖元素宽高比，按钮宽度远大于高度时，会变成超大椭圆甚至溢出
移动端需注意：小尺寸按钮（如高 24px）建议统一用 border-radius: 12px，别硬套百分比

border-radius 极限值的实际约束

border-radius 理论上支持任意长度值，但浏览器会自动裁剪——当值超过「该边可容纳的最大圆角」时，它就停在极限位置，不会报错也不会溢出。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

对水平方向的圆角（左上、右上、左下、右下），极限由「对应边的内边距 + 内容高度/宽度」共同决定。简单说：左右圆角最大值 ≈ min(height / 2, padding-left, padding-right)；上下圆角最大值 ≈ min(width / 2, padding-top, padding-bottom)。

比如一个 height: 32px、padding-left: 8px 的按钮，border-radius: 16px 有效，但 border-radius: 20px 会被浏览器压回 16px（因高度限制），而 border-radius: 8px 才真能被左端完全接纳（因左内边距只有 8px）
Chrome 和 Safari 对极限值的裁剪逻辑一致，Firefox 偶尔在 flex 容器里表现略有差异，建议用固定像素值而非百分比规避
用 border-radius: 9999px 是常见 hack，但它本质是“取够大值让浏览器自己截”，不推荐——语义不清，调试困难，且在某些旧 WebView 里可能触发渲染异常

一行代码写出兼容性好的胶囊按钮

不需要 JS，纯 CSS 即可，但必须控制好三要素：高度、左右内边距、border-radius。

<button class="pill">确认</button>

.pill {
  height: 40px;
  padding: 0 24px;
  border-radius: 20px;
  border: none;
  background: #007bff;
  color: white;
  font-size: 14px;
}

这个例子中 height: 40px → 半高 = 20px，padding: 0 24px → 左右留足空间，border-radius: 20px 刚好匹配
若文字变长导致宽度激增，只要不改变 height 和 padding，圆角依然稳定；但若用 em 或 rem 做 border-radius，字体缩放时可能破坏比例
禁用 line-height 控高——它和 height 混用容易引发垂直居中偏移，尤其在 Windows Chrome 下