border-radius应按场景选数值或百分比：固定尺寸用像素值（如10px）更可控，正圆或响应式才用50%；四角设置需记清补全规则，单角修改推荐用独立属性。
border-radius 写数值还是百分比？看场景选
数值（如 10px）适合固定尺寸的圆角矩形，比如按钮、卡片；百分比（如 50%）只在需要响应式或正圆时才可靠，但它不是“更高级”，而是用途完全不同。
常见误用：给一个 width: 200px; height: 60px; 的按钮写 border-radius: 50%，结果是胶囊形——这没错，但如果你想要的是“两端半圆+中间直边”，那正是预期效果；可如果目标是正圆，这就直接失败了。
- 固定像素值更可控，尤其在设计系统中需复用统一圆角时（如
4px、8px、12px） -
50%只有在宽高等值时才出正圆，否则生成的是椭圆（水平半径 = 宽×50%，垂直半径 = 高×50%） - 超大数值如
999px会被浏览器自动截断为最大可能值，不如50%稳定
四个角怎么分别设？顺序和补全规则必须记清
写 border-radius: 4px 8px 12px 16px 是明确指定左上、右上、右下、左下，顺时针无歧义；但少写几个值就会触发自动补全，容易踩坑。
比如 border-radius: 5px 10px 15px 实际等价于 5px 10px 15px 10px（第四个值复制第二个），不是你直觉想的“左上、右上、右下、留空”。
- 单值：
border-radius: 8px→ 四角都是8px / 8px - 双值：
border-radius: 4px 6px→ 所有角水平半径4px，垂直半径6px - 三值：
border-radius: 3px 6px 9px→ 补全为3px 6px 9px 6px，左下=右上 - 四值：
border-radius: 2px 4px 6px 8px→ 明确左上→右上→右下→左下
想只圆一个角？别硬凑缩写，用独立属性
用 border-top-left-radius 这类独立属性，比写 border-radius: 8px 0 0 0 更直观、更少歧义，也避免因补全逻辑导致意外效果。
尤其当你后续要动态改某个角（比如 JS 控制右上角打标），单独属性可以直接操作，不用解析整个缩写值。
- 只圆右上角：
border-top-right-radius: 8px - 只圆左下和右上：
border-bottom-left-radius: 6px; border-top-right-radius: 6px - 混合单位也安全：
border-bottom-right-radius: 50%（前提是该角所在元素局部宽高可推导）
为什么加了 border-radius 却没看到圆角？先查这三点
不是属性失效，而是渲染条件不满足。最常漏掉的是：元素没有可裁剪的“实体区域”。
- 元素是
display: inline（如默认的<span></span>或纯文字），必须加display: inline-block或block - 没设
width和height，又没内容/内边距撑开尺寸，盒子实际高度为 0 - 背景或边框缺失：
border-radius裁剪的是边框和背景，若两者都透明，圆角“存在但不可见”
特别注意图片：<img> 是替换元素，border-radius 对它生效，但若父容器有 overflow: hidden 而图片又超出尺寸，圆角会被截断——此时得确保图片自身尺寸匹配，或用 object-fit: cover 配合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
