背景图被“裁剪”的本质是绘制区域与盒模型边界未对齐，核心解法是协同设置background-clip和background-origin为padding-box，并配合padding及避免浮动塌陷。
背景图被“裁剪”，通常不是图本身被切了，而是它被画在了你不希望的位置——比如边框底下、圆角外沿、或浮动塌陷后的零高度区域。核心解法不是缩放或换图，而是控制背景的绘制起点和显示范围。
background-clip: padding-box 能让背景躲开边框
默认 background-clip: border-box 会让背景铺满整个盒模型（含边框区域），边框不透明时自然盖住背景图。改成 background-clip: padding-box 后，背景只渲染在内边距区域内，边框就再也不会遮挡它。
- 必须配合
padding使用，否则padding-box和content-box效果一样 - 不影响边框样式本身，边框照常显示，只是背景不再“钻”进边框底下
- 若同时用了
background-position或background-size: cover，建议同步设background-origin: padding-box，避免定位起点仍在 border-box 左上角导致偏移
background-origin 配合 background-clip 控制起点
background-origin 决定背景图从哪个盒子的左上角开始绘制，background-clip 决定它能画到哪里。两者不一致时，容易出现“图没被裁，但关键部分没露出来”的情况。
- 常见错误：设了
background-clip: padding-box，但background-origin还是border-box→ 图片从边框左上角开始画，却只允许在 padding 区显示，结果左边/上边一大块空白 - 推荐组合：
background-origin: padding-box+background-clip: padding-box，起点和边界对齐，行为可预测 -
background-origin: content-box适合内容区强隔离的场景（如卡片内文背景），但需注意 padding 区域完全透明，可能透出父容器色
border-radius 圆角不是 layout 裁剪，只是视觉裁剪
border-radius 不会改变元素的 width/height 或子元素布局流，它只在渲染层把背景色、背景图、阴影“切掉”圆角外的部分。所以背景图是否被多裁掉一圈，取决于 background-clip 和 background-origin 的组合。
立即学习“前端免费学习笔记（深入）”；
- 默认
background-clip: border-box+background-origin: padding-box→ 裁剪框是 border 外沿，但图从 padding 左上角起画，容易导致图片边缘被多裁 - 想让背景图刚好贴着圆角边缘？改用
background-clip: padding-box - 渐变背景被圆角“吃掉”边缘？避免
background-origin: border-box，它会让背景延伸到边框下，更容易被裁
浮动塌陷导致背景“消失”，其实是 height=0
父容器背景没显示，大概率不是 CSS 写错了，而是它的 offsetHeight 是 0 —— 浮动子元素脱离文档流，父容器撑不开高度。此时背景有，但没地方画。
-
overflow: hidden能临时触发 BFC 恢复高度，但副作用明显：裁剪溢出内容、砍掉 box-shadow、禁用滚动 - 更干净的解法是
display: flow-root，同样触发 BFC，且无裁剪行为，现代浏览器兼容良好 - 如果用了
clearfix却无效，检查content: ""是否遗漏、伪元素display是否为table或block、父容器是否还在文档流中
真正卡住人的，往往不是属性怎么写，而是没意识到：box-shadow 被裁、背景图被盖、圆角边缘发虚……这些表象背后，都是背景绘制区域与盒模型边界没对齐。动手前先打开开发者工具，看一眼 computed 的 background-clip、background-origin 和实际 height 值，比反复试错快得多。
