border-radius四值顺序为左上、右上、右下、左下，填满四值最稳妥；px适合ui一致性，%按宽高分别计算易成椭圆；需配合overflow:hidden裁剪子元素，且受box-sizing影响。
border-radius 本身就能实现圆角矩形，但“完美”不在于值写得多大，而在于它是否在各种尺寸、缩放、嵌套和浏览器环境下稳定呈现——多数翻车不是因为不会写，而是没理清单位逻辑、盒模型影响和裁剪边界。
border-radius 的四个值怎么填才不晕
别背顺时针口诀，直接按「左上、右上、右下、左下」写满四个值最省心。浏览器对简写补全规则容易反直觉：
-
border-radius: 8px 12px→ 左上=8px、右下=8px，右上=12px、左下=12px（不是“上下/左右”） -
border-radius: 8px 12px 4px→ 左上=8px、右上=12px、右下=4px、左下=12px（第三个值只给右下，左下回退取第二个） - 想右下角不圆？必须写四值：
border-radius: 8px 12px 0 6px，缺省就可能被镜像覆盖
px 还是 %？选错单位会导致椭圆或响应失效
用 px（或 rem）适合按钮、卡片等 UI 组件，确保视觉一致性；用 % 是为了响应式，但它按元素宽高分别计算水平/垂直半径：
-
width: 200px; height: 100px; border-radius: 50%→ 实际是 100px × 50px 椭圆弧，不是正圆 - 要做“胶囊形”按钮？固定高度后设
border-radius: 50px（值 ≥ 高度一半），比50%更可控 - 小尺寸容器慎用大百分比，比如
border-radius: 20%在width: 40px元素上只出 8px 圆角，易被忽略
子元素溢出圆角？不是 border-radius 失效，是裁剪没配对
border-radius 只裁剪元素自身的背景和边框，不裁剪子元素——这是最常被误认为“bug”的地方：
- 图片溢出？父容器加
overflow: hidden，同时给img加display: block（消除 baseline 空隙） - 绝对定位箭头或阴影伸出？
overflow: hidden会剪掉它，此时改用clip-path: inset(0 round 12px)更安全 - Flex 子项撑满破坏圆角？显式设
align-self: flex-start或限制子项max-height
和 border / box-shadow / transform 一起用时的隐性冲突
这些组合不报错，但视觉经常不对：
-
border存在时，border-radius裁剪的是 border 外边缘；若用了box-sizing: content-box，padding 和 border 会把圆角“往里挤”，建议全局设* { box-sizing: border-box } -
box-shadow默认不随圆角裁剪，加inset或父容器overflow: hidden才能同步 - Safari 旧版本中
transform: scale()+border-radius易锯齿，可用clip-path: border-box降级兜底 - 别给
input或button设border-radius: 999px，部分浏览器会截断或忽略，50%或具体像素更可靠
真正麻烦的从来不是怎么写 border-radius，而是它和 overflow、box-sizing、transform 层叠时那些不报错却悄悄错位的渲染行为——这些地方得靠 DevTools 的“Layout Shift Regions”或强制重绘才能发现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
