border-radius支持1~4个值按顺时针（上左、上右、下右、下左）赋值；%适合响应式椭圆角，px/rel适合固定尺寸；50%需宽高等值才得正圆角；border参与裁剪，box-shadow需overflow:hidden或inset才随圆角。
直接用 border-radius 就能实现，但值的写法和单位选择会决定是否真圆、是否对称、是否在缩放或高DPI下出问题。
border-radius 的四种写法对应不同圆角效果
它不是只接受一个数字，而是支持 1~4 个值，顺序是「上左、上右、下右、下左」（顺时针）。浏览器按 CSS 值解析规则自动匹配：
- 1 个值：
border-radius: 8px→ 四角全为 8px 圆角 - 2 个值：
border-radius: 8px 12px→ 上左/下右 = 8px，上右/下左 = 12px - 3 个值：
border-radius: 8px 12px 4px→ 上左=8px，上右/下左=12px，下右=4px - 4 个值：
border-radius: 8px 12px 4px 6px→ 严格按顺时针赋值
别硬记顺序，遇到不确定时直接写满 4 个值，最可控。
百分比值 vs 像素值：什么时候该用哪个
用 % 是相对容器宽高的，适合做「椭圆角」或响应式圆角；用 px（或 rem）是绝对尺寸，适合 UI 组件中保持视觉一致性。
- 当元素宽高不等（比如一个 200×100px 的卡片），
border-radius: 50%不会得到正圆角，而是椭圆角（水平半径=100px，垂直半径=50px） - 想强制做成正圆角（如头像），必须保证宽高等值 +
border-radius: 50% -
border-radius: 9999px是种常见 hack，用于“尽可能圆”，但不如50%语义清晰，且在极端缩放下可能溢出
边框 + 圆角组合时容易忽略的渲染细节
圆角本身不改变盒模型，但 border 会参与圆角裁剪。关键点：
- 如果设置了
border和border-radius，边框会被圆角自然截断，无需额外处理 - 但若同时用了
box-shadow，阴影默认不随圆角裁剪（除非加box-shadow: inset或用overflow: hidden包裹） - 在 Safari 旧版本中，
border-radius配合transform: scale()可能导致圆角锯齿，此时建议改用clip-path: border-box作兜底 - 不要给
input或button元素设过大的border-radius（如 >50% 容器高度），部分浏览器会忽略或渲染异常
真正麻烦的不是怎么写 border-radius，而是它和 border、background-clip、overflow、甚至父级 transform 层叠时的隐式行为——这些地方没报错，但视觉就是不对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
