胶囊形按钮需设height与border-radius=height/2，配inline-flex居中、min-width自适应、-webkit-appearance:none去iOS默认样式，并用prefers-color-scheme适配深色模式。
用 border-radius 制作胶囊形按钮最直接
胶囊形状本质是左右两端为半圆、中间为矩形，border-radius 设为足够大的值（通常等于或略大于高度的一半）就能实现。关键不是“怎么画”，而是“怎么避免常见变形”：
- 必须设置
height或line-height保证有明确高度，否则border-radius: 50px在矮元素上会失效 - 左右内边距
padding-left/padding-right要足够，否则文字挤在中间、视觉上不饱满 - 避免同时设
width和padding导致水平溢出；推荐用min-width控制最小宽度，让按钮随文字自适应
完整 CSS 写法要兼顾点击热区和移动端适配
只靠 border-radius 不够，真实项目里常遇到点击区域小、iOS 上按钮发虚、安卓下阴影错位等问题。下面这段是经过多端验证的写法：
.cart-btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 44px;
min-width: 120px;
padding: 0 24px;
background: #ff6b6b;
color: white;
font-weight: 600;
border: none;
border-radius: 22px; /* = height / 2 */
cursor: pointer;
transition: background 0.2s;
-webkit-appearance: none; /* 消除 Safari 默认样式 */
touch-action: manipulation; /* 提升移动端响应 */
}
注意：border-radius: 22px 是硬匹配 height: 44px 的结果，改高度时务必同步调整这个值；-webkit-appearance: none 在 iOS 上尤其重要，否则按钮边缘会残留原生灰边。
图标+文字组合时容易撑开胶囊形状
加购物车按钮常带 ? 或 SVG 图标，若处理不当会导致高度突变、圆角被截断。核心原则是：所有子元素必须沿 y 轴居中，且不引入额外行高干扰：
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 用
inline-flex容器 +align-items: center，比vertical-align更可靠 - 图标用
font-size控制大小，避免用width/height强制缩放 SVG（会破坏比例） - 如果用
<svg></svg>，记得加vertical-align: middle或包裹在span里并设display: inline-block - 文字行高
line-height必须与容器height一致，否则上下留白会压缩圆角显示区域
深色模式下背景色对比度不足是高频遗漏点
很多团队做完基础样式就上线，结果在 macOS 或 iOS 深色模式下按钮变成浅粉配灰字，完全不可读。别依赖 JS 检测主题，用原生 CSS 方案更稳：
.cart-btn {
background: #ff6b6b;
}
@media (prefers-color-scheme: dark) {
.cart-btn {
background: #e74c3c;
}
}
真正麻烦的是第三方组件库或内联样式覆盖——如果你的按钮被框架（比如 Vue 的 v-btn 或 React 的 Button）封装过，@media 规则可能被 scoped style 阻断，这时得把深色模式规则提到全局样式表，或改用 color-scheme: light dark 配合系统色变量（但兼容性略低）。胶囊按钮看着简单，最难的其实是让它在各种上下文里都“不破形、不掉色、不缩手”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
