我们现在来基于Ethan所使用的技术，构建另一个示例，它将是一个具有真正灵活性的框，能容纳其内部的任何东西。
1.HTML代码结构
如我先前提到过的，要实现一个在每个方向都灵活的框，面临的不幸事实是我们需要添加额外的代码。这些额外的代码是独立引用框的四角的图片所必须的，这样它才能根据需要在四个方向扩展。
注意：因为有些地方已经超过了本章要讨论的范围，所以为了让例子简单，这里对HTML代码做了一些修改。本来，这个圆角矩形框是一个“定义列表”对象的一部分，该列表还包括有“切换人”的姓名以及其它信息。这是一个运用定义列表的聪明又巧妙的方法－－可以去查看http://browsehappy.com 的页面源码获知更多细节。
要谨记，我们应该使用最少的HTML对象来作为背景图片的载体，以下是我们创建的HTML代码：
<div class="container">
<p class="desc">This box is:</p>
<p class="link"><em><a href="/browsers/firefox/">Indestructible!</a></em></p>
</div>
一个作为容器的<div>和紧随其后的一个段落对象将作为前两个载体。要凑足四个，我们将链接“Indestructible!" 用第二个段落对象以及（这里引入了一个有争议的额外HTML对象）一个<em>对象包围起来。这里我使用<em>是因为，从技术角度来讲，我也打算让它个链接表达一种强调的意思。
同时，我悄悄地加上这个对象。这是我打算避免的事情，但是本例的情况下，我们需要这个第四个对象，以便引入创建圆角的必要背景图片（图5-18）。
图5-18 我们建的框的HTML代码给我们提供了四个可用作背景图片载体的对象
结构图：
2.图片的策略
虽然我们需要引用四次背景图片（一个角一次），但可以借鉴Browse Happy网站所用的巧妙方案，它只需要用到两张GIF图片。我们先来看看图片本身，就能理解这种方法了。
如图5-19所示，rounded-left.gif 是一张9个像素宽的GIF图片，包括左上方和左下方圆角。我们将它创建得比预期的高很多，以便能容纳大的内容量。
图5-19 这张名为rounded-left.gif 的图片包括了左上和左下圆角
再如图5-20 ，rounded-right.gif 是一张类似的图片：它负责显示右边的上下两个图角，以及上，右和下边线。这张图片和rounded-left.gif 的高度相同，并且也比原本所需的尺寸要宽很多。
图5-20 rounded-right.gif 包括右上和右下圆角。这张图还带有框的上下边线
现在我们来定位这此图片——并且这里就是精妙之处。图片rounded-left.gif 将对齐于top以形成左上方的角（图5-21），然后再次被使用，对齐于bottom，形成左下方的角。
图5-21 当依附到顶边时，除非框增到足够大而被暴露，否则图片下面的圆角是显示不出来的
只要框不会超过图片高，那么那个没有用上的，隐藏起来的圆角就不会显示（（这也解释了为什么我们开始时将图片做得足够高）。相应的，对于rounded-right.gif，也会被使用两次——作为右上和右下圆角。
运用最好的判断力来决定将这些图片做得多高和多宽，当然主要是取决于框内部会放些什么类型的内容。留出一些多作空间，以便应付意料之外的文字大小和内容量。
现在我们继续操作，给HTML代码应用样式，并且将所有的设计整合在一起。
