胶囊按钮需用 height/2 的 border-radius（如高40px则设20px），禁用50%防失真；悬停用 transform 替代 margin 避重排；阴影分两层模拟立体感；文字居中用 line-height=height+vertical-align:middle。
用 border-radius 控制胶囊弧度，别硬凑百分比
胶囊按钮本质是矩形 + 两端半圆，关键在 border-radius 值要和高度匹配。比如按钮高 40px，那左右两端的圆角必须是 20px（即高度一半），才能严丝合缝。写成 border-radius: 20px 或 border-radius: 0 20px 20px 0 都行，但别用 50%——它在宽度变化时会失真，尤其响应式下容易变椭圆或塌陷。
- 固定高宽按钮：直接设
border-radius: calc(height / 2)，CSS 中可用border-radius: 20px硬编码更稳 - 内容动态撑开的按钮：用
border-radius: 999px是常见取巧法，浏览器会自动压平为最大可行圆角，兼容性好且不易破形 - 慎用
border-radius: 50%：它按盒模型宽高分别计算，宽高不等时必然不是正圆弧
悬浮动效靠 transform 和 transition，别只改 margin 或 top
用 margin-top 或 top 悬浮会触发重排（reflow），卡顿明显；transform: translateY(-2px) 只走合成层，顺滑得多。过渡时间建议 transition: transform 0.2s ease-out，太短没感知，太长像迟钝。
- 必须给
transition指定具体属性，写成transition: all 0.2s容易误触其他变化（比如文字颜色、阴影）导致意外动画 - 悬停时加轻微缩放（如
transform: translateY(-2px) scale(1.02)）能强化“浮起”感，但 scale > 1.03 容易让文字模糊，尤其在低DPI屏上 - 记得加
will-change: transform提前提示浏览器优化，但仅对频繁交互的按钮加，别全局滥用
阴影用 box-shadow 分层模拟立体感，别只套一层
单层 box-shadow: 0 2px 6px rgba(0,0,0,0.15) 看着平。真胶囊按钮该有近端深影 + 远端浅晕，推荐两层：box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.15)。第一层紧贴按钮模拟接触面阴影，第二层扩散模拟空间距离。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 避免用
text-shadow模拟按钮投影——它只作用于文字，和按钮本体脱节 - 深色主题下，阴影颜色别用纯黑，改用
rgba(0,0,0,0.2)或根据背景微调，否则像贴了黑胶布 - 移动端慎用大范围阴影，部分低端安卓 WebView 渲染慢，甚至导致点击区域偏移
文字居中要用 line-height + vertical-align 组合，别只靠 padding
胶囊按钮常因上下 padding 不均或字体 baseline 导致文字视觉偏高。最稳方案：设 height 和 line-height 相等（如都是 40px），再配 vertical-align: middle。若内容含图标，vertical-align: middle 必须加在图标 <img> 或 <svg></svg> 上，否则图标基线会拉低整体。
- Flex 布局虽方便，但在老版本 Safari（iOS 12 以下）里
align-items: center对inline-flex按钮支持不稳，优先选传统方案 - 字体用
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif，系统字体渲染更锐利，避免 Helvetica Neue 在 Chrome 下发虚 - 文字过长时胶囊易撑宽变形，用
white-space: nowrap; overflow: hidden; text-overflow: ellipsis保形，但得确保按钮足够宽容纳常见文案
真正难的不是画出胶囊，而是让它在各种字号、DPI、缩放比例、旧浏览器里都不走样。圆角值、transform 层级、阴影分层这三处，改一处常牵出两处bug，调的时候最好开着 device toolbar 实时切分辨率看。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
