border-radius是控制四角弧度的长度值，顺时针对应左上、右上、右下、左下；省略时按规则补全；单角属性可覆盖整体值；需配合overflow:hidden裁剪子元素；动画慎用，优先选transform。
border-radius 基本写法和取值逻辑
border-radius 不是“开关”，而是控制四个角弧度的尺寸描述符。它本质是一组长度值（px、em、%），按顺时针顺序对应左上、右上、右下、左下四个角。省略时会自动补全：只写一个值，四个角等同；写两个值，分别是“上下”“左右”；写三个值，是“左上”“右上右下”“左下”；写四个值，才真正分别控制每个角。
常见错误现象：border-radius: 50%; 在正方形元素上才得到正圆，长方形上会变成椭圆；而 border-radius: 999px; 看似“暴力取整”，但在小尺寸元素上可能溢出或被截断，不如用 % 更可靠。
- 优先用
%做响应式圆角，比如border-radius: 8%，随容器宽高变化自适应 - 想做“胶囊形”按钮？确保元素高度固定，再设
border-radius: 50px（值 ≥ 高度一半） - IE9+ 支持标准写法，IE8 及以下完全不支持，别试图用滤镜模拟
单个角单独设置：不要硬记缩写，用标准语法
想只改右上角？别去查什么 border-top-right-radius 是不是拼错——它就是标准属性名，大小写敏感，不能简写。所有单角控制都遵循 border-[top/bottom]-[left/right]-radius 这一命名规则。
使用场景：卡片右下角加小标记、表单输入框仅左端圆角、对话气泡箭头连接处需保留直角等。
- 直接写
border-top-left-radius: 12px，比用四值border-radius: 12px 0 0 0更清晰、更易维护 - 注意：单角属性不接受百分比值在某些旧版 Safari 中有兼容问题，稳妥起见统一用
px - 如果同时用了
border-radius和某个单角属性，后者会覆盖前者对应位置的值
border-radius 与 overflow:hidden 的隐性冲突
给带子元素的容器设了 border-radius，但子元素（尤其是图片、视频、绝对定位内容）边缘依然方正、甚至溢出圆角区域——这不是 bug，是默认行为。CSS 圆角只裁剪**自身背景和边框**，不自动裁剪子元素。
必须配合 overflow: hidden 才能真正实现视觉上的“圆角裁剪”。但这里容易踩坑：
-
overflow: hidden会剪掉position: absolute子元素超出父容器的部分，包括你故意伸出的阴影或箭头 - Flex 或 Grid 子项若设了
align-self: stretch，在overflow: hidden下可能被意外截断 - 不要对
body或根容器滥用border-radius + overflow: hidden，滚动条可能消失或行为异常
性能提示：动画 border-radius 要谨慎
对 border-radius 做 CSS 动画（比如 hover 时从 4px 到 16px）看似轻量，但它会触发 Layout（重排），尤其在大量元素或复杂布局中，帧率容易掉。
替代方案更稳：
- 用
transform: scale()模拟“膨胀感”，只触发 Composite（合成），性能好得多 - 真要动圆角，确保该元素已设
will-change: border-radius（仅限明确需要动画的少数元素） - 移动端 Safari 对
border-radius动画优化较差，测试时务必真机查看
圆角本身很简单，但和 overflow、动画、响应式、子元素定位搅在一起时，边界条件特别多。动手前先想清楚：你要裁的是什么？谁来负责裁？动的时候谁来扛性能？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
