加了rounded-pill却没变药丸形，是因为该类依赖border-radius: 50rem生效，但需元素有明确高度、非纯内联（如需display: inline-block）、不能与rounded-circle共存，且在btn-group等容器中需额外处理首尾子元素圆角继承。
直接用 border-radius 就行，但“pill”不是 HTML 标签属性，而是 CSS 圆角值的视觉命名习惯——本质是两端半圆、中间直边的特定数值组合。
为什么加了 rounded-pill 却没变药丸形
这个类名来自 Bootstrap 等组件库，并非原生 HTML 支持。它背后是 border-radius: 50rem（注意单位是 rem，不是 %），靠极大半径强制拉满两端成半圆。但生效前提是：
- 元素必须有明确高度（比如按钮带
btn类，或自己设height/line-height） - 不能是纯内联元素（如未设
display: inline-block的span），否则没有盒模型可作用 - 不能和
rounded-circle同时用——后者是border-radius: 50%，两者规则冲突，后声明的会覆盖 - 在
btn-group或input-group中，需额外处理:first-child和:last-child的圆角继承，否则可能只有一端圆
border-radius: 50rem 和 border-radius: 50% 的区别在哪
这是 pill 和 circle 的根本分水岭：
-
50rem是固定长度值，不随元素尺寸变化。只要元素高度够，两端必然撑成半圆，中间保持直线——适合按钮、标签等有稳定高度的控件 -
50%是相对值，按当前宽高分别计算：水平半径 = 宽度 × 0.5，垂直半径 = 高度 × 0.5。宽高不等就出椭圆，只有正方形才得正圆 - 用
50rem做 pill 更稳，但若元素高度极小（如12px），50rem可能远超尺寸，导致圆角“溢出”，此时浏览器会自动裁剪为最大可行值
自己写 pill 样式，不依赖 Bootstrap 怎么做
不用框架也能实现，关键是控制好半径与尺寸关系：
- 推荐写法：
border-radius: 9999px—— 浏览器会按实际可用空间渲染，效果等同于50rem，且兼容性更好（无单位问题） - 更精细的控制：若按钮高度是
32px，可写border-radius: 16px（即半高），确保两端严格半圆 - 配合
white-space: nowrap防止文字折行破坏 pill 形状 - 对
inline元素（如span标签做 tag），务必加display: inline-block或display: inline-flex，否则border-radius不生效
图片或文字标签加 pill 圆角容易漏掉的关键点
很多人在 img 或 span 上直接加 border-radius 却失败，核心卡点不在样式本身：
-
img必须有明确width和height（或通过父容器约束），否则border-radius: 50rem无法锚定渲染基准 - 如果用
object-fit: cover裁剪头像，别再套一层overflow: hidden容器——现代浏览器下border-radius已能直接裁剪图片内容，多一层包裹反而增加 DOM 深度和潜在裁剪干扰 - 文字标签（如 tag）若背景色靠
padding带出来，要检查是否设置了box-sizing: border-box，否则border-radius可能被 padding 推挤变形 - 移动端老 WebView（如 Android 4.3 以下）不支持
border-radius动画，静态 pill 没问题，但 hover 缩放圆角会卡顿，建议改用transform: scale()
真正难的不是写对那行 border-radius，而是确认它作用在谁身上、那个“谁”有没有尺寸、有没有盒模型、有没有被父级裁掉——pill 看着简单，一嵌套就露馅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
