背景默认绘制到border-box外沿，即包含padding和border区域，但被边框遮盖；可通过background-clip控制绘制边界：border-box（默认）、padding-box、content-box。
CSS盒模型直接影响背景（background）的绘制范围，关键在于背景默认画到哪里——不是只画在内容区，而是默认延伸到边框外沿，但会被边框遮盖。这个行为由 background-clip 属性控制，而它的默认值正是理解背景显示范围的核心。
背景默认绘制到 border-box 外沿
当你给一个元素设置 background-color 或 background-image，浏览器默认按 background-clip: border-box 渲染。这意味着：
- 背景区域从内容区开始，一直延伸到border 的外边缘（即包含 padding 和 border 区域）
- 但边框本身是“盖”在背景之上的，所以你会看到边框压住背景，形成“边框在前、背景在后”的视觉效果
- padding 区域一定有背景色/图；border 区域内侧也有背景，只是被 border 遮住了
三种 background-clip 可选值对比
你可以显式修改背景绘制边界，用 background-clip 指定它停在哪一层：
-
background-clip: border-box（默认）：背景画满整个 border 盒子，含 padding + border 下方区域 -
background-clip: padding-box：背景只画到 padding 的外沿，不进入 border 区域，边框完全透明可见（适合带镂空边框的设计） -
background-clip: content-box：背景严格限制在 content 区域内，padding 和 border 完全无背景，内容周围留白且透明
padding 和 border 对背景的协同影响
即使不改 background-clip，padding 和 border 的存在也实际决定了你“看到”的背景范围：
立即学习“前端免费学习笔记（深入）”；
-
padding越大，内容离边框越远，背景在内侧显露的区域就越宽——这是最常用的内容呼吸感做法 -
border有颜色时会遮挡部分背景；若设为transparent或0宽度，则背景完整可见 - 当使用
box-sizing: border-box时，width/height 已包含 padding 和 border，此时 background 的可视区域更易预测
实战注意：行内元素与背景
行内元素（如 <span></span>）虽有盒模型，但其 background 行为略有不同：
- 支持
padding和border，背景会正常延伸到 padding 区域 - 但
margin的上下值无效，所以背景在垂直方向不会因 margin 扩展 - 行高（
line-height）决定其实际占据高度，背景在行框内垂直居中铺开
