border-radius 不会吃掉 padding，但视觉上易误判；它裁剪背景和边框，padding 仍存在，仅被圆角覆盖部分角落。需配合 overflow: hidden 才影响内容显示区域，grid 子项不继承父圆角，须单独处理。
border-radius 会吃掉 padding 吗？
不会，但视觉上容易误判。圆角裁剪的是容器的背景和边框，padding 依然存在，只是被圆角“盖住”了一部分——尤其当 border-radius 值大于 padding 时，内边距角落看起来像被削掉了。
- 真正影响内容可显示区域的是
border-radius和overflow: hidden的组合；没设overflow时，子元素仍可溢出圆角区域 - 如果网格项（
grid-item）本身有背景或边框，它们不会自动继承父容器的圆角，得单独处理 - 用
background-clip: padding-box（默认值）可确保背景不画到圆角外沿，避免意外色块
grid 容器加圆角后，子项间距怎么保持整齐？
直接在 grid-container 上设 padding 是最稳的方式，再配合 gap 控制子项间距。别试图靠子项的 margin 模拟间距——网格布局下 margin 折叠不可靠，且会被圆角干扰。
-
padding给容器留白，让圆角不紧贴内容；gap管理子项间隙，二者职责分明 - 例如：
padding: 16px+gap: 8px，实际内容区到容器边缘是 16px，相邻子项中心距是子项宽 + 8px - 避免同时设
padding和负margin，后者在 flex/grid 中行为不一致，容易在 Safari 里出错
圆角 + gap 在旧版 Safari 中渲染异常怎么办？
Safari 15.4 之前版本对 grid 容器的 border-radius 和 gap 复合渲染有 bug：圆角区域可能漏出背景，或 gap 在角落处变窄。
- 临时解法：加
overflow: hidden强制重绘，但注意这会让绝对定位子项被裁剪 - 更稳妥的降级：用
outline替代border，或把圆角移到包裹层（外层 div 设border-radius，内层 grid 设padding） - CSS 新标准中
gap已支持所有现代浏览器，但 Safari ≤15.3 对grid+border-radius+gap三者共存的支持仍不稳定
要不要用 clip-path 模拟圆角？
不要。除非你明确需要非四分之一圆的形状（比如椭圆、切角），否则 border-radius 性能更好、兼容性更广、语义更清晰。
立即学习“前端免费学习笔记（深入）”；
-
clip-path: round(…)在 Chrome/Firefox 中支持良好，但 Safari 对clip-path的硬件加速不完善，滚动时易掉帧 -
clip-path不触发background-clip行为，背景绘制逻辑和border-radius不同，调试更费劲 - 如果真要用，参数必须写成
clip-path: round(12px)，不是round(12px, 12px)—— 后者是旧语法，已废弃
overflow、background-clip、浏览器渲染管线共同影响，调的时候最好在真机 Safari 里点开开发者工具，拖动 border-radius 值实时看裁剪边界。 
