需加前缀的浏览器包括Firefox 3.6–20、Chrome 1–25、Safari 3–6.1，均只识别带厂商前缀的老语法（如-moz-background-origin: padding）；IE8及更早版本完全忽略该属性，IE9+支持无前缀语法但存在行为差异。
background-origin 在现代浏览器中基本可用，但 IE 和旧版 Safari 的行为差异大，必须加前缀 + 显式 fallback 才能可靠生效。
哪些浏览器需要加前缀？
Firefox 3.6–20、Chrome 1–25、Safari 3–6.1 都只认老语法 padding/border/content，且需厂商前缀；现代浏览器（Chrome 26+、Firefox 21+、Safari 7+、Edge 12+）支持新语法 padding-box/border-box/content-box，但仍建议保留前缀以覆盖边缘版本。
-
-moz-background-origin: padding;和-moz-background-origin: padding-box;都要写，后者放后面 -
-webkit-background-origin: padding;同理，旧 Safari（如 iOS 6.1）不识别padding-box - IE9+ 支持无前缀
background-origin，但 IE8 及更早完全忽略该属性（不会报错，也不会降级）
为什么 background-position 偏移值会“对不上”？
因为 background-origin 决定了 background-position 的坐标系原点。默认是 padding-box，即从 border 内侧开始算；设成 content-box 后，right 20px bottom 10px 就是从内容区右下角往内偏移——这在有 padding 的容器里常被误认为“失效”，其实是原点变了。
- 若容器
padding: 10px，又想背景图离右下角始终是 10px，则用background-origin: content-box，再配background-position: right 10px bottom 10px - 若用
border-box，同样写法会让图贴到边框外沿，可能被裁掉或溢出 - 不要混用简写
background和独立background-position：简写中未声明的background-origin不会继承独立声明的值
如何安全地 fallback 到老式定位？
background-origin 不支持时，浏览器不会报错，也不会回退到其他原点，而是静默使用默认的 padding-box。真要降级，得靠结构或 JS 检测，但最务实的做法是：把关键视觉依赖控制在 padding-box 范围内，避免依赖 content-box 或 border-box 的极端定位。
立即学习“前端免费学习笔记（深入）”；
- 不要指望
background-origin: border-box在 IE8 或 Safari 6.1 下生效——它直接被跳过 - 如果设计强依赖
content-box定位（比如卡片内图标紧贴文字右下），可改用伪元素::after+ 绝对定位模拟，兼容性更好 - 用
@supports (background-origin: content-box)包裹增强样式，但注意 Safari 15.3 之前连@supports对它的检测都不可靠
真正容易被忽略的是：background-origin 的生效前提是背景图存在且未被 background-clip 裁掉。如果同时设置了 background-clip: content-box 和 background-origin: border-box，图可能被裁到看不见——这两个属性不是孤立的，得一起看边界关系。
