border-radius可直接实现圆角，无需额外容器或overflow:hidden；四角顺序为左上→右上→右下→左下顺时针；50%仅在宽高相等时得正圆；椭圆圆角须用“/”分隔横纵半径。
直接用 border-radius 就能实现，不需要额外容器或 overflow: hidden —— 除非你是在裁剪子元素内容。
border-radius 值怎么写才不乱套
四个角的顺序是固定的：顺时针，左上 → 右上 → 右下 → 左下。别按“上下左右”去猜，那是错的。
- 单值：
border-radius: 12px→ 四个角都是 12px - 双值：
border-radius: 8px 16px→ 等价于8px 16px 8px 16px（左上/右下、右上/左下） - 三值：
border-radius: 4px 8px 12px→ 等价于4px 8px 12px 8px（左下复用右上） - 四值：
border-radius: 4px 8px 12px 16px→ 严格按顺时针顺序生效
想做圆形头像？50% 不等于随便写
border-radius: 50% 只有在宽高相等时才出正圆。如果图片是 width: 100px; height: 80px，50% 会变成椭圆，不是你想要的“头像”效果。
- 确保正方形：用
aspect-ratio: 1或显式设width和height相同 - 别依赖父容器尺寸推算百分比——
50%是基于当前元素自身的宽高分别计算的，水平半径 = 50% × width，垂直半径 = 50% × height - 如果图片由 CMS 动态插入且尺寸不可控，优先用容器 +
overflow: hidden更稳妥
椭圆圆角必须用斜杠，逗号没用
要让圆角横竖不同（比如上边更“扁”），必须用 / 分隔水平和垂直半径。浏览器看到逗号或空格分隔的两个值，会当作「两个角」处理，不是椭圆。
- 正确：
border-radius: 20px / 10px→ 所有角都是水平 20px、垂直 10px 的椭圆弧 - 也支持分角控制：
border-radius: 15px 5px / 10px 3px→ 左上角横15纵10，右上角横5纵3 - 错误写法：
border-radius: 20px, 10px或border-radius: 20px 10px（后者是双值简写，不是椭圆） - IE9+ 支持斜杠语法；IE8 及更早版本完全忽略整条规则
border-radius 生效但看起来没变圆？先查这三件事
最常被忽略的不是语法，而是渲染上下文干扰。
- 父容器没设
overflow: hidden，但子元素（比如图片）溢出了圆角区域——这时圆角还在，只是内容“撑破”了视觉边界 - 元素本身没背景色或边框，
border-radius依然生效，但你看不见效果（它只影响边框和背景的绘制区域） - 和其他属性叠加时出问题：比如
transform: scale()之后，圆角可能被重绘失真；box-shadow默认不跟随圆角裁剪，需配合overflow: hidden才能一起圆润
真正麻烦的不是怎么写 border-radius，而是它和 overflow、box-shadow、transform 这些属性之间的隐式耦合——改一个，另外两个可能就“掉链子”。动手前先想清楚：你要裁剪内容，还是只修饰边框轮廓？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
