的最后一个段落元素：

    

    <div class="box">
      <h2>headline</h2>
      <p class="last">content</p>
    </div>

    图3-6所示为生成的框。因为没有给这个框设置高度，所以它会随着文本尺寸的增加进行垂直扩展。

    图3-6  样式特殊的固定宽度框。框的高度会随着文本尺寸的增加而扩展

    灵活的圆角框

    如果加大字号，前面的示例都会垂直扩展。但是，它们不会水平扩展，因为框的宽度必须与顶部和底部图像的宽度一致。如果希望创建灵活的框，那么需要采用略有不同的方法。不用单一图像组成顶部和底部曲线，而是用两个相互重叠的图像（见图3-7）。

图3-7  如何扩展顶部图像来形成灵活的圆角框

    随着框尺寸的增加，大图像有更多的部分显露出来，这样就实现了框扩展的效果。这个方法有时候被称为滑动门技术（sliding doors technique），因为一个图像在另一个图像上滑动，将它的一部分隐藏起来。这个方法需要更多的图像，所以必须在标记中添加两个额外的无语义元素。

    <div class="box">
      <div class="box-outer">
        <div class="box-inner">
      <h2>headline</h2>
      <p>content</p>
      </div>
       </div>
    </div>

    这个方法需要四个图像：两个顶部图像组成顶部曲线，两个底部图像组成底部曲线和框的主体（见图3-8）。因此，底部图像的高度必须与框的最大高度相同。分别将这些图像命

[1]  [2]  [3]