直接用padding+border-radius可做圆角标签，但需确保元素有背景或边框、设为inline-block/inline-flex、合理匹配padding与border-radius值（如4px 12px配6px），并用line-height控制文字居中，避免用999px等不可控数值。
直接用 padding + border-radius 就能做出干净利落的圆角标签，但多数人卡在背景没显出来、文字贴边、或圆角“不圆”——问题不在属性本身，而在元素默认行为和尺寸控制。
为什么加了 border-radius 却看不到圆角
圆角不是“画上去”的装饰，而是对元素可视区域做裁剪。如果元素没内容、没背景、没尺寸，就等于裁了一块空气。
- 确保元素有
background-color或border（纯文字标签常漏写） - 避免用默认
display: inline的标签（如<span>）直接加圆角——必须加display: inline-block或display: inline-flex -
padding是关键：它撑开内边距，让文字不紧贴边缘，同时给border-radius提供可作用的“块状区域”
padding 和 border-radius 怎么配才自然
标签的视觉舒适度取决于内边距与圆角半径的比例。太小显得局促，太大又像按钮。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 常见组合：
padding: 4px 12px+border-radius: 6px（圆角半径 ≈ 水平 padding 的一半） - 想更柔和：用
border-radius: 8px配padding: 5px 16px，适合中等字号文字 - 极简风格可用
border-radius: 4px+padding: 3px 8px，但字号别超过 14px，否则文字会溢出 - 别用
border-radius: 999px—— 浏览器会截断为最大可能值，不如明确写6px或8px可控
标签文字居中不偏移的要点
文字在圆角标签里“飘”或“下沉”，通常是因为行高（line-height）没跟上 padding。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
padding: 4px 12px; line-height: 1.5;（自动适配字号） - 若固定高度需求强，用
height: 24px; line-height: 24px;，但需同步设box-sizing: border-box - 避免只设
vertical-align: middle——对inline-block元素效果不稳定，优先靠line-height控制 - 图标+文字标签时，
display: inline-flex; align-items: center; gap: 4px;比纯文本更稳
真正难的不是写对那两行 CSS，而是意识到：圆角标签的“简约”来自克制——padding 别贪大，border-radius 别堆数值，背景色选低饱和度，文字字号不超过父容器的 90%。这些细节不报错，但一松懈就露怯。
