border-radius写单值（如8px）为标准圆角，双值（如8px 4px）因水平/垂直半径不同易显椭圆；百分比值按盒模型宽高计算；box-sizing影响裁剪基准，overflow:hidden不自动裁剪子元素。
border-radius 值怎么写才不变成椭圆
border-radius 写成单个数值（比如 10px）时，四个角等效应用，是标准圆角矩形；但一旦写成两个值（如 10px 5px），就分别作用于「水平半径 / 垂直半径」，此时如果父容器高度不够或内容撑不开，视觉上会像椭圆压扁——不是 bug，是 CSS 规范里明确的椭圆弧线绘制逻辑。
- 单值写法：
border-radius: 8px→ 四角都是 8px 圆角 - 双值写法：
border-radius: 8px 4px→ 水平方向 8px，垂直方向 4px，容易在窄高容器里显“扁” - 四值写法：
border-radius: 4px 8px 4px 8px→ 顺时针：左上、右上、右下、左下，各角独立控制
注意：百分比值（如 5%）是相对于盒模型的对应方向宽度/高度计算的，不是相对于字体或视口。所以 width: 200px; height: 40px; border-radius: 50% 实际得到的是 100px × 20px 的椭圆弧，而非正圆角。
box-sizing 影响 border-radius 的实际渲染范围
border-radius 的裁剪区域，严格按 border-box 模型的边界生效——也就是说，它只对 border 外边缘起作用；如果用了 box-sizing: content-box，而你又加了 padding 或 border，那圆角会从内容区边缘开始算，但被外层 padding/border 掩盖一部分，导致“圆角变浅”甚至“看不见”。
- 默认
box-sizing: content-box下，padding: 10px; border: 2px solid #000; border-radius: 6px→ 圆角实际从内容区起始，但被 padding 和 border 向内挤压，视觉圆角小于 6px - 改用
box-sizing: border-box后，width和height包含 padding 和 border，border-radius才真正以最外层为基准裁剪
建议全局重置：* { box-sizing: border-box; }，否则在 flex/grid 容器中嵌套圆角元素时，不同浏览器对 border-radius 裁剪边界的解释可能有细微差异。
border-radius 在 overflow: hidden 容器里失效？
不是失效，是裁剪逻辑没对上。当子元素超出父容器且父容器设了 overflow: hidden 和 border-radius，圆角裁剪只作用于父容器自身盒模型的背景和边框，不自动裁剪子元素——除非子元素也满足「层叠上下文 + 不触发 paint containment」的组合条件。
- 常见翻车场景：卡片组件里放一张图，父容器设了
border-radius: 12px; overflow: hidden，但图片仍方角溢出 - 解决办法之一：给图片加
display: block（避免行内元素 baseline 留空隙），再加border-radius: 12px自身 - 更稳妥做法：父容器保持
border-radius+overflow: hidden，同时确保子元素没有transform、filter或will-change，否则可能创建新层叠上下文，绕过父级裁剪
Chrome 115+ 开始支持 clip-path: border-box，但兼容性差，现阶段别依赖。
圆角性能要注意什么
border-radius 本身几乎零性能开销，但配合以下操作会触发全量重绘或合成层提升：
- 和
transform动画一起用时，如果圆角值动态变化（比如 JS 修改style.borderRadius），每帧都需重新光栅化，iOS Safari 尤其卡顿 - 与
box-shadow叠加时，阴影模糊半径越大，GPU 绘制压力越明显；若圆角 + 阴影 + 透明度三者共存，某些 Android WebView 会降级为 CPU 渲染 - 在大量列表项（如 100+
li）上无差别加border-radius: 4px，虽不卡，但会增加样式计算复杂度，可考虑用伪元素或 SVG 替代
简单原则：静态圆角放心用；动画圆角尽量用 clip-path 替代（仅支持现代浏览器）；阴影圆角组件优先走 CSS 变量控制，避免运行时字符串拼接修改 style
圆角看着简单，但真正在复杂布局、跨端适配、动效叠加时，border-radius 的行为边界比想象中窄——尤其当它和 overflow、transform、box-sizing 出现在同一元素上，顺序和组合方式稍有偏差，结果就可能完全不对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
