<p class="zw">当在边框里放置图像时，我们要注意边框的四个角，因为在响应式设计中，我们也不知道每个元素的高度和宽度，所以在填充边框时，我们需要精心调整图像的平铺或拉伸。</p> <p class="zw"><code>stretch</code>：当图像特别宽大或光滑，推荐使用拉伸来适应宽度。</p> <pre class="代码无行号"><code>.h-review { border-image-repeat : stretch; }</code></pre> <p class="图"><img alt="1405.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/131.jpg"></p> <p class="图题">边框图像铺满了边框。</p> <p class="zw"><code>repeat</code>：如果边框图像有纹理，如噪点等，那么使用拉伸就不合适了，此时可能需要平铺来适应宽度。</p> <pre class="代码无行号"><code>.h-review { border-image-repeat : repeat; }</code></pre> <p class="图"><img alt="1406.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/132.jpg"></p> <p class="图题">边框图像通过平铺填充了边框。</p> <p class="zw"><code>round</code>：如果某个图形既不能铺满，又需要边缘重复，那就可以使用<code>round</code>。</p> <pre class="代码无行号"><code>.h-review { border-image-repeat : round; }</code></pre> <p class="图"><img alt="1407.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/133.jpg"></p> <p class="图题">调整切片大小以确保只有完整的切片来填充边框。</p> <p class="zw"><code>space</code>：和<code>round</code>很像，只有整个切片在边框内显示时才使用<code>space</code>。浏览器会在平铺的图像间加入空白，而不是调整边框图像的大小。</p> <pre class="代码无行号"><code>.h-review { border-image-repeat : space; }</code></pre> <p class="图"><img alt="1408.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/134.jpg"></p> <p class="图题">平铺完整的切片，并在切片间添加空白，这样整个边框就被均匀地填充了。</p> <p class="zw">当我们需要为每个边框分别设置<code>stretch</code>、<code>repeat</code>、<code>round</code>或<code>space</code>的时候，可以设置多值属性。</p> <pre class="代码无行号"><code>.h-review { border-image-repeat : stretch round; }</code></pre>
