在这一节，我们将用本章学习的边框图像来设计一张名片。花哨的HTML这里用不上，因为名片包含联系信息，所以使用h-card这种微格式就行了，如下所示。

 
S.A.Fari
 
Web Inspector
 
Checking all elements
 
Dial 4.0.4 5531.21.10
 
Member of the WebKit team since 2006
 

这可不是用硬纸板做的。那精致的边框是设计师敲键盘码出来的。

首先使用一个小的PNG图像，尺寸为160×160像素， 只有3Kb大小。然后使用边框图像去装饰可以是无数不同尺寸大小的元素。

首先使用一个包含了四个边角和图案装饰的小图像，我们用它来装饰名片的边框。

首先我们设置一个辅助线作为指导，从我们用来修饰边框样式的图像的每一边各取20px。然后我们再设定边框宽度，同样是20px。

.h-card { 
border-image-source : url(safari.png); 
border-image-slice : 20; 
border-width : 20px; }

到目前为止，原图像的四个角的装饰就被应用到名片的四个角了。那么边框呢？在这个错综复杂的设计中，我们必须谨慎地控制边框的呈现效果。

对于眼前的这个设计，stretch 肯定是不行的；而简单的repeat会导致图案与边角的不匹配；我们也不想使用space而在图案中引入空白。所以，我们应该选择round。这将会轻微改变平铺图案的大小，因此只会显示完整的图案。为了提升设计的整体档次，成为一张超越平凡的名片，让我们来添加两个阴影：第一个更暗、更硬朗；第二个更亮、更柔和。

使用round ，我们让浏览器调整装饰图像，这样，只有完整的切片才能恰当地填充边框。

.h-card { 
box-shadow : 0 2px 5px 
rgba(0,0,0,.5), 
0 20px 30px rgba(0,0,0,.2); }