<p class="zw">边框图像非常适合实现响应式设计的需求，它允许我们使用最小的位图图像，也可以使用任何风格的边框。我们也可以使用矢量图SVG，甚至是单纯的CSS渐变。在边框内使用矢量图的最简单方法是应用<code>border-image-source</code>，和使用位图的方法几乎一样。</p> <pre class="代码无行号"><code>.h-review { border-image-source : url(h-review.svg); }</code></pre> <p class="zw">这个方法得到了浏览器很好的支持，只要是支持<code>border-image</code>的浏览器，都允许我们将SVG设置为<code>border-image-source</code>。</p> <p class="zw">使用CSS渐变制作边框或许是最巧妙的替代方案，因为它给设计师带来了极大的创作空间，并且它几乎不会增加网页大小。它包含在样式表中，不会有额外的请求， 这使得它非常适合响应式网页设计。</p> <p class="zw">就算你以前没有使用过CSS渐变也不要担心，后面我们会详细讲。现在我们来使用渐变给边框添加斜纹。</p> <pre class="代码无行号"><code>.h-review { border-image-repeat : repeat; border-image-source : repeating-linear-gradient(-45deg, white, white 3px, #ebf4f6 3px, #9Bc7d0 6px); border-image-slice : 10; border-width : 10px; }</code></pre> <p class="图"><img alt="1411.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/137.jpg"></p> <p class="图题">平铺渐变的边框真是个完美的案例，<code>border-image</code>和<code>gradient</code> 这两个CSS属性组合使用可以让响应式设计更快、更有弹性。</p> <p class="zw">当然，使用<code>border-image</code>和<code>gradient</code>还可以创造出更多效果，而要实现这些效果，其他CSS属性就力不从心了。在接下来的例子中，我们将会使用一个由上至下、由深变浅的蓝色线性渐变。</p> <pre class="代码无行号"><code>.h-review { border-image-source : linear-gradient(to bottom, #9Bc7d0, #ebf4f6 100%); border-image-slice : 10; border-width : 10px; }</code></pre> <p class="图"><img alt="1412.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/138.jpg"></p> <p class="图题">为边框添加线性渐变可以让设计更具质感，这是其他CSS属性难以实现的。</p> <p class="zw">渐变效果在元素的某个高度的位置由上至下变浅，当然，这个高度很大程度上取决于元素包含的内容大小。为了让渐变充满整个评论框，我们将渐变声明从变化的100%调整为一致的，但仍然是弹性的, <code>8rem</code>。</p> <pre class="代码无行号"><code>.h-review { border-image-source : linear-gradient(to bottom, #9Bc7d0, #ebf4f6 8rem); }</code></pre> <p class="图"><img alt="1413.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/139.jpg"></p> <p class="图题">将渐变的值从百分比改为弹性单位rem，渐变就可以从不同的元素高度开始一致的变化。</p>
