border-radius四个值顺序为顺时针：左上→右上→右下→左下；单值全角，双值上下/左右交替，三值左下复用右上；椭圆需用斜杠分隔横纵半径，如20px/10px。
border-radius 的四个值怎么记顺序？
记住顺时针：左上 → 右上 → 右下 → 左下。写成 border-radius: 4px 8px 12px 16px 就是这四个角分别应用。
常见错误是当成「上下左右」去套，结果右上角没变圆——它其实对应第二个值，不是「右」那个值。
- 单个值：
border-radius: 6px→ 四个角等效为6px 6px 6px 6px - 两个值：
border-radius: 4px 10px→ 等价于4px 10px 4px 10px（上下/左右交替） - 三个值：
border-radius: 4px 8px 12px→ 等价于4px 8px 12px 8px（左下复用右上）
椭圆圆角怎么写？用斜杠分隔
当需要横纵半径不同时，必须用斜杠分隔：横向半径 / 纵向半径。比如 border-radius: 20px / 10px 表示所有角都是水平 20px、垂直 10px 的椭圆弧。
这个斜杠不能省，否则浏览器会当作非法语法忽略整条规则；也别写成 border-radius: 20px, 10px——逗号是多组值的分隔符，不是椭圆写法。
- 支持每个角单独设椭圆：
border-radius: 10px 20px / 5px 15px（左上横10纵5，右上横20纵15） - 只设一个角的椭圆：
border-radius: 12px 0 0 0 / 6px 0 0 0（仅左上为椭圆，其余直角） - 注意兼容性：IE9+ 支持斜杠写法，IE8 及更早版本完全不支持
border-radius
border-radius 影响 overflow 和阴影渲染
圆角本身不会裁剪内容，但一旦父容器设置了 overflow: hidden，超出圆角区域的内容就会被剪掉——这是最常被忽略的联动行为。
阴影（box-shadow）默认按原始矩形形状投射，即使加了 border-radius，阴影边缘仍是方的。要让阴影也带圆角，得确保 border-radius 值足够大，且避免 overflow: hidden 干扰。
- 图片圆角常破图：给
<img>直接加border-radius没问题，但若外层有overflow: hidden容器，且图片未设置display: block，可能因行内元素基线留白导致底部露直角 - 伪元素或背景图圆角失效：如果用
background-image铺满，又没设background-clip: padding-box，圆角处可能出现背景溢出
移动端 Safari 的 border-radius 渲染异常
iOS 15.4 之前，Safari 对 border-radius + transform 组合存在渲染 bug：圆角偶尔消失或错位，尤其在元素有 will-change: transform 或动画中。
这不是代码写错，而是渲染管线冲突。临时解法是加一行触发硬件加速但绕过该路径的 hack：
border-radius: 8px; transform: translateZ(0); /* 触发 GPU 加速，但避开 Safari 的 bug 路径 */
- 慎用
border-radius+filter: drop-shadow()：iOS 下可能造成圆角锯齿或模糊加重 - 超大圆角（如
50%）在低分辨率屏上容易出现像素级断裂，建议搭配backface-visibility: hidden稍微改善
圆角看着简单，但和 overflow、transform、filter、甚至设备像素比都咬得很紧。调的时候别只盯着 CSS 值，得看它在真实容器里到底裁了谁、影子往哪落、手机上有没有闪一下就变方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
