border-radius真实修改元素渲染边界，裁切边框、背景和内容；值越大越圆，50%且宽高相等时成正圆；支持像素、百分比、多值及椭圆写法，顺序为左上→右上→右下→左下。
border-radius 直接决定元素四个角的弯曲程度
它不是“加个装饰”，而是真实修改了元素的**渲染边界**——浏览器会按你给的半径，把原本直角的边框（和背景、内容）一起裁成圆弧。值越大，角越圆；设为 50% 且宽高相等时，就变成正圆。
- 像素值（如
12px）适合固定尺寸控件，比如按钮、卡片角 - 百分比值（如
20%）更适配响应式容器，会随元素尺寸动态缩放 - 设为
0或省略，就是默认直角；设为999px这类极大值，等效于50%（超出部分被截断）
四种写法对应不同控制粒度：从统一到单角精调
顺序永远是「左上 → 右上 → 右下 → 左下」顺时针，这点容易记反，尤其在调试不对称圆角时。
-
border-radius: 8px—— 四角全等，最常用 -
border-radius: 8px 16px—— 左上+右下用8px，右上+左下用16px -
border-radius: 8px 12px 4px 16px—— 每角独立，适合气泡箭头、定制卡片 -
border-radius: 10px / 5px—— 斜杠前是水平半径，后是垂直半径，生成椭圆角（注意：需配合height显式设置才稳定）
图片变圆失败？大概率是宽高不等或没处理 overflow
用 border-radius: 50% 给 <img alt="css盒模型中border-radius如何影响元素形状_通过圆角调整元素外观" > 做圆形头像，却出现椭圆、白边、或边缘锯齿？问题通常不在 CSS 本身。
- 必须确保
width和height相等，否则50%会生成椭圆 - 加
overflow: hidden（或用clip-path: circle()备用）防止图片溢出圆角边界 - 推荐搭配
object-fit: cover，避免拉伸变形；若图片本身带透明毛边，预处理比硬调 CSS 更可靠 - 老项目里如果用了
box-sizing: content-box+ 边框，圆角会作用在 border 外侧，视觉上比预期小——统一用border-box更可控
别忽略它和 border、background 的协同关系
圆角不是孤立属性。边框宽度、背景渐变、阴影都会被它一并裁切，这也意味着某些效果会“消失”或“错位”。
立即学习“前端免费学习笔记（深入）”；
- 有
border时，border-radius同时作用于 border 的内外边缘，所以粗边框+小圆角可能看起来“不够圆” - 用
linear-gradient作背景时，圆角会裁掉渐变的直角延伸部分，有时需额外加padding或调整渐变角度来补偿 -
box-shadow默认也受圆角影响，但若需要“外扩阴影”，可用inset或多层 shadow 模拟，不能靠删border-radius
border-radius，而是想清楚：这个角该由谁裁、裁到哪、裁完之后边框和背景还剩多少可见。多数“效果不对”，其实是边界归属没理清。 
