体验新版 GitCode，发现更多精彩内容 >>
<p class="zw">在这一节，我们将用本章学习的边框图像来设计一张名片。花哨的HTML这里用不上，因为名片包含联系信息，所以使用<code>h-card</code>这种微格式就行了，如下所示。</p> <pre class="代码无行号"><code><div class="h-card"> <h3 class="p-name">S.A.Fari</h3> <p class="p-role">Web Inspector</p> <h4>Checking all elements</h4> <p>Dial <span class="p-tel">4.0.4 5531.21.10</span></p> <p>Member of the WebKit team since 2006</p> </div></code></pre> <p class="图"><img alt="1414.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/140.jpg"></p> <p class="图题">这可不是用硬纸板做的。那精致的边框是设计师敲键盘码出来的。</p> <p class="zw">首先使用一个小的PNG图像，尺寸为160×160像素， 只有3Kb大小。然后使用边框图像去装饰可以是无数不同尺寸大小的元素。</p> <p class="图"><img alt="1415.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/141.jpg"></p> <p class="图题">首先使用一个包含了四个边角和图案装饰的小图像，我们用它来装饰名片的边框。</p> <p class="zw">首先我们设置一个辅助线作为指导，从我们用来修饰边框样式的图像的每一边各取<code>20px</code>。然后我们再设定边框宽度，同样是<code>20px</code>。</p> <pre class="代码无行号"><code>.h-card { border-image-source : url(safari.png); border-image-slice : 20; border-width : 20px; }</code></pre> <p class="zw">到目前为止，原图像的四个角的装饰就被应用到名片的四个角了。那么边框呢？在这个错综复杂的设计中，我们必须谨慎地控制边框的呈现效果。</p> <p class="zw">对于眼前的这个设计，<code>stretch</code> 肯定是不行的；而简单的<code>repeat</code>会导致图案与边角的不匹配；我们也不想使用<code>space</code>而在图案中引入空白。所以，我们应该选择<code>round</code>。这将会轻微改变平铺图案的大小，因此只会显示完整的图案。为了提升设计的整体档次，成为一张超越平凡的名片，让我们来添加两个阴影：第一个更暗、更硬朗；第二个更亮、更柔和。</p> <p class="图"><img alt="1416.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/142.jpg"></p> <p class="图题">使用<code>round</code> ，我们让浏览器调整装饰图像，这样，只有完整的切片才能恰当地填充边框。</p> <pre class="代码无行号"><code>.h-card { box-shadow : 0 2px 5px rgba(0,0,0,.5), 0 20px 30px rgba(0,0,0,.2); }</code></pre>
