<p class="zw">当一个元素同时拥有背景图像、背景色还有边框时，默认情况下，背景会延伸到边框的下方，并延展到盒模型的边缘。CSS3提供了<code>border-box</code>和<code>background-clip</code>这两个属性来控制这种行为。</p> <pre class="代码无行号"><code>.h-card { background-image : url(h-card.png); border : 10px dashed rgb(0,0,0); background-clip : border-box; }</code></pre> <p class="zw">如果我们指定一个盒模型为<code>padding-box</code>，那么任何背景色或者背景图像都将在延伸到盒模型内边距的边缘后被裁剪掉，而不会延伸到它的边框后面。</p> <pre class="代码无行号"><code>.h-card { background-clip : padding-box; }</code></pre> <p class="图"><img alt="1503.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/146.jpg"><img alt="1504.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/147.jpg"></p>
