<p class="zw">你应该已经比较了解CSS里的<code>background-position</code>属性，浏览器会在边框内部，将背景图像相对于元素内边距的边缘来定位。CSS3以<code>padding-box</code>为基础，结合使用<code>background-origin</code>的多个属性值，可以创造很多可能性。</p> <p class="zw"><code>background-origin</code>属性中的一种是，使背景图像相对于元素的边缘来定位，甚至延伸到边框下面。它就是<code>border-box</code>。</p> <pre class="代码无行号"><code>.h-card { background-origin : border-box; }</code></pre> <p class="zw">使用<code>content-box</code>，那么背景图像将会在元素的内边距以内，相对于实际内容的边缘来定位。</p> <pre class="代码无行号"><code>.h-card { background-origin : content-box; }</code></pre> <p class="图"><img alt="1505.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/148.jpg"><img alt="1506.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/149.jpg"></p>
