border-radius是接受长度值或百分比的css属性，控制边框角的弧度大小；单值统一四角，双值分水平垂直，四值顺时针设左上右上右下左下，支持混用单位，可用方位长名单独设置某角，优先级高于简写且不重置其他角。
border-radius 的基本写法和取值逻辑
border-radius 不是布尔开关，而是接受长度值或百分比的 CSS 属性，它控制的是边框角被“切掉”的弧度大小。值越大，圆角越明显；为 0 时无圆角；设为 50% 且宽高相等时，会得到正圆。
- 单值写法：
border-radius: 8px→ 四个角统一应用 - 双值写法：
border-radius: 4px 12px→ 水平方向（左上+右下）、垂直方向（右上+左下）分别生效 - 四值写法：
border-radius: 4px 8px 12px 16px→ 顺时针：左上、右上、右下、左下 - 支持不同单位混用，如
border-radius: 2em 50% 10px 0
设置单个角的圆角（避免影响其他角）
直接使用带方位的长名称属性，比用四值更可控，尤其在需要单独调整某个角时：
border-top-left-radius: 6pxborder-top-right-radius: 0border-bottom-right-radius: 10pxborder-bottom-left-radius: 50%
注意：这些独立属性优先级高于 border-radius 简写，且不会重置其他角——这点常被忽略，误以为改一个就得重写全部。
border-radius 在 img 和 background-image 上的表现差异
对 <img alt="css如何设置元素边框圆角_通过border-radius实现圆角效果" > 元素设 border-radius，会裁剪图片内容本身（包括透明区域）；但对纯色背景或 background-image 的容器，只裁剪背景绘制区域，不触发图像裁剪（除非同时设了 overflow: hidden）。
立即学习“前端免费学习笔记（深入）”；
- 想让图片真正圆角显示，必须加
overflow: hidden配合border-radius - 用
background-image+border-radius时，若背景图未设background-clip: padding-box，圆角可能只作用于边框内侧，导致视觉偏差 - SVG 图标作为
background-image时，border-radius无法让 SVG 内部图形变圆，它只裁剪容器
兼容性和常见失效原因
现代浏览器对 border-radius 支持极好，IE9+ 均可用，但以下情况会导致“看起来没生效”：
- 父容器有
overflow: hidden，但子元素的圆角超出父容器尺寸——实际生效了，只是被裁掉了 - 设置了
border但颜色透明（border: 1px solid transparent），容易误判为“没边框所以没圆角”，其实border-radius依然起作用 - 使用了
transform: scale()等缩放后，圆角半径不会按比例缩放，可能显得过小或突兀 - Flex 或 Grid 容器中子项未设宽高，
border-radius可能因渲染尺寸不稳定而表现异常
圆角不是装饰糖衣，它本质是几何裁剪行为——理解这一点，才能预判它在哪生效、在哪被截断、为什么看起来“失灵”。
