border-radius用于控制元素边框曲率，值越大弧度越缓，50%时正方形变圆、长方形变椭圆；它不影响布局流，仅作用于渲染层，需配合overflow: hidden裁剪内容，注意与border、background-clip协同及CSS变量使用限制。
border-radius 能做什么
它不是只让四个角变圆，而是控制元素边框的曲率。值越大，弧度越缓；设为 50% 时，正方形会变成圆形，长方形则变成椭圆。注意：它不影响内容流布局，也不会触发重排（re-layout），只影响渲染层。
怎么写 border-radius 才不踩坑
常见错误是直接写 border-radius: 10px 就以为完事了——这确实能生效，但一旦需要差异化控制四角，或者配合 border、background-clip 使用，问题就来了：
-
border-radius支持最多 8 个值，按「水平半径 / 垂直半径」成对出现：左上、右上、右下、左下 - 写成
border-radius: 10px 20px表示左上/右下用 10px，右上/左下用 20px；写成border-radius: 10px 20px 30px 40px则分别对应四角 - 如果用了
border且边框较粗，圆角实际生效半径是min(设定值, 边框宽度 / 2)，所以border: 20px solid #000; border-radius: 5px几乎看不出圆角 - 当背景有渐变或图片时，记得加
background-clip: padding-box（默认值），否则圆角裁剪可能不一致
border-radius 和 overflow 配合失效怎么办
这是最常被忽略的组合陷阱：子元素超出父容器时，即使父元素设置了 border-radius，子元素仍可能“撑破”圆角显示直角。
- 必须给父容器加上
overflow: hidden，否则圆角仅作用于边框绘制，不参与裁剪 - 若子元素用了
position: absolute或 transform，某些浏览器（尤其是旧版 Safari）可能绕过裁剪，需额外加transform: translateZ(0)或will-change: transform - Flex 容器内部子项若设了
flex-shrink: 0且内容超宽，也可能突破圆角边界，此时要检查是否遗漏了min-width: 0
要不要用 CSS 变量动态控制圆角
可以，而且很实用，尤其在主题切换或响应式场景中：
立即学习“前端免费学习笔记（深入）”；
- 定义：
:root { --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; } - 使用：
button { border-radius: var(--radius-md); } - 注意：CSS 变量不能直接用于
@media内部计算（如calc(var(--radius-md) * 2)在部分旧浏览器中不支持），稳妥做法是预先定义好倍数变量 - 如果搭配自定义属性做动画（比如 hover 时改变圆角），要清楚
border-radius是可过渡属性，但过渡效果在大数值变化时容易显得生硬，建议限制在 0–16px 范围内
圆角看着简单，真正卡住人的往往不是语法，而是它和 overflow、border、background-clip 之间的隐式协作关系。
