<p class="zw">当我写本书第一版的时候，设计边框只有几种选择：点状<code>dotted</code>、虚线<code>dashed</code>、实线<code>solid</code>、双线<code>double</code>、槽形<code>groove</code>、脊形<code>ridge</code>、内阴影<code>inset</code> 和外阴影<code>outset</code>。谁用过后面这四种？反正我没用过。</p> <p class="zw">那时候， CSS <code>border-image</code> 刚可以让设计师在边框上加入图像，只有位图、SVG和CSS渐变格式。这个新的属性让我非常兴奋。毕竟，我们可以在任何元素边框上加入图像了，即使表格和列也可以（除非设置了忽略边框）。</p> <p class="zw">那么<code>border-image</code>到底怎么用？你在网络上能看到大量巧妙的边框设计吗？并没有。当我问道谁在过去五年里使用过<code>border-image</code>时，我的CSS培训班中只有寥寥数人举起了手。</p> <p class="zw">我对此非常好奇，因为即便<code>border-image</code>属性会带来新的挑战，但它对响应式设计却是非常有用的。</p> <p class="zw">考虑到<code>border-image</code>复杂的语法可能会令人望而却步，因此我现在就来指导你如何使用。下面我们来用它实现一个博客评论框。</p> <pre class="代码无行号"><code><div class="media h-review"> <div class="media__figure"><img src="avatar.png" alt=""></div> <div class="media__content"> […] </div> </div></code></pre> <p class="图"><img alt="1403.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/129.jpg" style="width: 1334px" width="1334"></p> <p class="图题"><code>border-image</code>属性是拉伸或重复小图像的神器，以此设计各种尺寸的界面元素。它在流式布局和注重细节的移动端设计中特别有效。</p>
