border-radius 不改变盒模型尺寸，仅裁剪渲染层；其生效值受box-sizing、边框宽度、元素尺寸及相邻角约束影响，过大时浏览器自动缩放，且需配合overflow: hidden防止内容溢出。
border-radius 不改变盒模型尺寸，但会干扰你对“实际宽高”的直觉判断
它只裁剪渲染层的背景、边框和阴影，width、height、padding-box、border-box 全都不变。问题出在：你眼睛看到的“圆润边缘”和你代码里写的 200px 宽，并不是同一回事——尤其是当 box-sizing 混用时。
比如设了 width: 200px; padding: 10px; border: 2px solid #000;：
-
box-sizing: content-box（默认）下，总宽是200 + 2×10 + 2×2 = 224px，你按 200px 估算圆角半径，结果发现弧度“不够圆” -
box-sizing: border-box下，总宽就是200px，但此时 padding 和 border 都被“挤进”这个 200px 里，圆角半径若还按老习惯设 50px，可能已接近高度一半，视觉上突然变“胖”
这不是 bug，是你对“容器到底多大”的认知和浏览器渲染之间存在错位。
border-radius 值过大时，浏览器会自动缩放，且缩放逻辑不透明
规范明确要求：相邻两角半径之和不能超过对应方向尺寸，否则必须按比例缩小所有相关半径。你写 border-radius: 999px，浏览器不会报错，也不会忽略，而是悄悄算出一个等效值——比如一个 height: 120px 的元素，左右下角都设了 999px，那它们的垂直方向之和远超 120px，最终生效的可能是 60px 左右，且左右下三者保持比例关系。
这种缩放不可见、不可控，只在 DevTools 的 computed 样式里能看到最终值。常见踩坑点：
- 用
%单位时，水平/垂直半径分别基于 width/height 计算，长宽比失衡会导致椭圆角，你以为是圆，其实是扁的 - 四值写法如
border-radius: 0 0 100px 100px，若元素高度只有80px，那两个100px会被同步压缩，最终可能变成40px，而非你预期的“底部尽量圆” - 八值写法（
border-radius: 10px 20px / 5px 10px）更易触发邻角重叠，调试难度陡增
子元素溢出圆角边界，不是 border-radius 的问题，而是 overflow 缺失
border-radius 从不参与 layout，它只负责“画得圆”，不管里面的东西怎么排。文字、图片、绝对定位图标，全按原始矩形区域布局。所以你会看到内容“捅破”圆角边缘——这跟 border-radius 本身无关，是父容器没加 overflow: hidden。
但加了 overflow: hidden 又容易引发新问题：
- 绝对定位子项（比如气泡箭头）被意外裁掉，得用
transform: translate()微调位置 - Flex 子项设了
align-self: stretch，可能被截断，改用flex-shrink: 1或max-height更稳妥 - 某些 WebView 下，
overflow: hidden+transition会导致圆角过渡中闪烁，本质是重绘节奏不同步
边框宽度和 border-radius 不匹配，直接导致圆角“消失”
圆角内半径 = 外半径 − 对应边框宽度。如果结果 ≤ 0，浏览器就退化为斜角或直角。比如 border: 4px solid #333; border-radius: 2px，内半径 = 2 − 4 = −2px → 无效，视觉上就是直角。
要让圆角真正可见，必须满足：border-radius ≥ border-width / 2（至少）。更实用的经验值：
- 胶囊按钮：先定
height: 40px，再设border-radius: 20px（即高度一半） - 带粗边框的卡片：若
border: 3px，border-radius至少设2px才有弧度感，1px很可能看不出 - 避免混用单位：不要
border-radius: 0 → 50%过渡，% 在不同尺寸下计算结果不同，插值路径不一致
真正难的不是写对语法，而是在各种 box-sizing、overflow、border-width 和响应式尺寸组合下，预判那个“看起来刚好”的数值——它往往不是你算出来的，而是反复调出来的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
