background-color 盖不住 border 是因默认绘制在 padding-box 区域，而 border 在更外层；需同时设 background-origin: border-box 和 background-clip: border-box 才能让背景填满圆角边框区域。
background-color 为什么盖不住 border
因为 background-color 默认只画在 padding-box 区域，而 border 是更外层的绘制层，视觉上自然就“露出来”了。这不是 bug，是 CSS 盒模型的分层规则决定的。
常见错误现象：border: 3px solid #000 + background-color: #fff 下，边框依然黑得扎眼，以为颜色没生效；或者用 box-shadow 模拟边框时发现和背景色打架。
- 真正想让背景“压住”边框，得改绘制起点：用
background-origin: border-box - 但注意：这仅影响
background-color和background-image的起始位置，不影响background-clip -
background-origin对纯色背景意义有限——它只是把颜色区域扩大到 border 区，但 border 本身仍是独立图层，颜色不会“覆盖”边框的绘制逻辑
background-origin 和 background-clip 的区别在哪
这两个属性都控制背景的“作用范围”，但一个管“从哪开始画”，一个管“画到哪为止”。混淆它们是边框遮盖问题的根源。
使用场景：需要背景色延伸进边框内侧（比如实现内发光效果），或让图片背景刚好卡在 padding 边缘不溢出。
-
background-origin可选值：border-box、padding-box（默认）、content-box -
background-clip可选值：border-box（默认）、padding-box、content-box - 关键差异：
background-clip才真正裁剪显示区域；background-origin只偏移起点，若 clip 还是padding-box，那 origin 再大也白搭 - 实操建议：想让背景色填满整个 border 区域，必须同时设
background-origin: border-box和background-clip: border-box
border 被盖住后，圆角还生效吗
会。但前提是 border-radius 本身存在，且 background-clip 没把它裁掉。
性能/兼容性影响：IE11 不支持 background-clip: border-box，此时即使设了 origin，背景仍被圆角 border 截断；Chrome/Firefox/Safari 均无问题。
- 如果只设
background-origin: border-box但保留默认background-clip: border-box，圆角正常，背景填满整个 rounded 区域 - 如果误设
background-clip: content-box，哪怕 origin 是 border-box，背景也会被硬生生切掉圆角部分 - 验证方法：临时加
border: 2px dashed red，看虚线是否被背景“吞掉”——吞掉了说明 clip 生效了；没吞说明 clip 还在默认态
实际项目中该优先调哪个属性
绝大多数情况，你根本不需要动 background-origin。真正要调的是 background-clip。
容易踩的坑：查文档看到 “origin 控制起点”，就以为改它就能盖边框，结果白调半天；或者复制了别人带 origin 的代码，却漏了配套的 clip，导致在某些浏览器里失效。
- 纯色背景 + 圆角边框 → 只需
background-clip: border-box - 背景图 + 需要图片延伸到边框内侧 →
background-origin: border-box+background-clip: border-box - Flex/Grid 容器里子元素边框被父容器背景“吃掉” → 问题不在 origin/clip，而在父元素
overflow: hidden或 z-index 层级，别跑偏
盒模型里没有“覆盖”这回事，只有绘制顺序和裁剪边界。搞清这点，就不会再盯着 background-color 发呆了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
