background-clip 能把背景限制在 padding-box 或 content-box；默认为 border-box，padding-box 使背景停在 padding 内边缘，content-box 仅渲染于 content 区内，且对 background-image 和 background-color 均生效。
background-clip 能把背景限制在 padding-box 还是 content-box？
能，而且必须用 background-clip，不是 background-origin 或 background-size。很多人改了半天 background-origin 发现没用，就是因为混淆了“背景从哪开始画”和“背景画到哪为止”——background-clip 管后者。
默认值是 border-box，也就是背景会铺满整个盒子（含 border 区域）。要让它只到 padding 边界或 content 边界，就得显式设为 padding-box 或 content-box。
-
padding-box：背景停在 padding 内边缘，不进入 padding 区，更不会进 content；border 和 padding 区域都透明（除非你另外设了 border 背景） -
content-box：背景只渲染在 content 区内，连 padding 都不占 - 注意：
background-clip对background-image和background-color都生效
为什么设置了 background-clip 却没效果？
常见原因就三个，挨个排查：
- 元素没有 padding 或 border，导致
padding-box和border-box看起来一样——加个padding: 20px再试 - 用了
background-attachment: fixed，此时background-clip会被忽略（浏览器行为，CSS 规范明确允许） - 父容器或自身有
overflow: hidden且内容溢出，视觉上“裁掉”的不是background-clip，而是 overflow 裁剪，容易误判
background-clip 和 background-origin 的区别到底在哪？
一句话：一个管“终点”，一个管“起点”。
立即学习“前端免费学习笔记（深入）”；
-
background-origin决定背景图片的0,0坐标锚在哪（border-box/padding-box/content-box），影响的是定位基准 -
background-clip决定背景最终渲染的边界，超出这个边界的区域一律透明（即使图片本该延伸过去） - 两者可以组合使用。比如
background-origin: content-box; background-clip: padding-box：图片从 content 左上角开始铺，但只显示到 padding 边缘——图片实际会“多画”进 padding 区，再被 clip 切掉
兼容性与移动端要注意什么？
background-clip 在现代浏览器（Chrome 15+、Firefox 4+、Safari 6.1+、Edge 12+）都支持 padding-box 和 content-box，但 iOS Safari 8–10 有个经典 bug：当元素有圆角（border-radius）时，background-clip: padding-box 可能失效，背景仍会溢出到圆角外。解决办法只有两个：
- 降级用
background-clip: border-box+ 半透明白色border模拟 padding 边界 - 或者改用
mask-image（但兼容性更差）
真要用 content-box 又得兼容老 iOS，基本只能放弃——它不是“不支持”，而是“支持但不可靠”。
