border-radius四值写法顺序为左上、右上、右下、左下，顺时针排列；填错顺序会导致圆角错位，如仅想左上和右下圆角，应写border-radius: 12px 0 12px 0，而非0 12px 0 12px。
border-radius 四值写法怎么填才对
填错顺序会导致圆角“长歪”，比如想左上圆、右下圆，却把值写成 border-radius: 0 12px 0 12px，结果是右上和左下变圆——因为四个值严格按顺时针顺序：左上、右上、右下、左下。
- 正确示例：
border-radius: 12px 4px 8px 2px→ 左上 12px、右上 4px、右下 8px、左下 2px - 只设两个值时（如
border-radius: 6px 12px），第一个是左上+右下，第二个是右上+左下 - 三个值（如
border-radius: 8px 16px 4px）表示：左上=8px、右上+左下=16px、右下=4px - 单位必须显式写出，
border-radius: 8无效，必须是border-radius: 8px或border-radius: 8%
非对称圆角按钮容易被 overflow:hidden 截断
父容器或按钮自身设了 overflow: hidden，但圆角半径超出盒模型边界时，会被直接裁掉——看起来像“没生效”，其实是被剪掉了。
- 检查按钮是否嵌套在
div或其他容器里，该容器是否有overflow: hidden - 按钮自己设了
border且未重置，也可能挤压圆角区域；建议统一加border: none - 某些 UI 框架（如 Bootstrap）默认给
button加border和overflow: visible被覆盖，需用!important或更高优先级选择器覆盖
移动端 Safari 对非对称 border-radius 渲染有偏差
iOS 16.5 之前版本中，当四个角半径差异较大（比如左上 24px、右下 2px），Safari 可能将小半径角渲染为直角，或出现轻微锯齿——这不是 bug，而是其渲染引擎对 sub-pixel 处理的保守策略。
- 规避方法：避免极端差值，例如不使用
border-radius: 24px 0 0 2px，改用border-radius: 24px 4px 4px 2px - 若必须强对比，可配合
-webkit-mask用 SVG 路径硬控形状（但增加复杂度） - 测试时务必真机验证，模拟器常显示正常，实际设备可能不同
用子属性单独控制某角更安全
当只需要改一个角（比如仅左上圆），用 border-top-left-radius 比四值简写更可靠——它不会意外影响其它角，也绕过顺序记忆负担。
- 常用子属性：
border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius - 它们支持所有
border-radius的单位和计算方式，包括calc()，比如border-top-left-radius: calc(1rem + 2px) - 注意：IE11 不支持子属性的百分比值（如
border-top-left-radius: 50%），若需兼容，退回四值写法并确保宽高固定
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
