精通CSS-固定宽度和灵活的圆角矩形

一、固定宽度的圆角框

最容易创建的是固定宽度的圆角框。它们只需要两个图像：一个图像用于框的顶部，另一个用于底部。例如，假设希望创建图3-3这样的框样式。

图3-3  简单的圆角框样式

这个框的标记如下：

<div class="box">
  <h2>Headline</h2>
  <p>Content</p>
</div>

需要用图形软件创建两个图3-4这样的图像：一个图像用于框的顶部，另一个用于底部。这个示例以及本书中其他所有示例的代码和图像可以从www.friendsofed.com下载。

图3-4  顶部和底部曲线图像

然后，将顶部图像应用于标题元素，将底部图像应用于div框的底部。因为这个框样式是单色的，所以可以在div框上添加背景颜色，从而形成框的主体。

.box {
    width:424px;
    background: #effce7 url(imges/bottom.gif) no-repeat left bottom;
}

.box  h2 {
   background:url(images/top.gif) no-repeat left top;
}

我们不希望内容碰到框的边界，所以还需要在div中的元素上添加一些填充：

.box h2 {
   padding: 10px 20px 0 20px;
}

.box p{
  padding: 0 20px 10px 20px;
}

这个方法对于单色而且没有边框的简单框是有效的。但是，如果希望创建像图3-5这样更生动的样式，那么怎么办？

图3-5  样式更特殊的圆角框

实际上，可以使用相同的方式，但是这一次不在框上设置背景颜色，而是设置一个重复显示的背景图像。还需要将底部曲线图像应用到另一个元素上。在这个示例中，我使用框中的最后一个段落元素：

box {
    width:424px;
    background: url(imges/bg-tile.gif) repeat-y;
}

.box  h2 {
   background:url(images/bg-top.gif) no-repeat left top;
   padding-top:20px;
}

.box .last {
   background:url(images/bg-bottom.gif) no-repeat left bottom;
   padding-bottom:20px;
}

.box h2, .box p{
   padding-left: 20px;
   padding-right:20px;
}

<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）。因此，底部图像的高度必须与框的最大高度相同。分别将这些图像命名为top-left.giftop-right.gif、bottom-left.gif和bottom-right.gif。

图3-8  创建灵活的圆角框所需的图像

首先，将bottom-left.gif应用于主框div，将bottom-right.gif应用于外边的div。接下来，将top-left.gif应用于内部的div，将top-right.gif应用于标题。最后，添加一些填充以便在内容周围形成一点儿空白。

box {
    width:20em;
    background: #iffce7 url(imges/bottom-left.gif) no-repeat left bottom;
}

.box-outer {
   background:url(images/bottom-right.gif) no-repeat right bottom;
   padding-bottom:5%;
}

.box-inner {
   background:url(images/top-left.gif) no-repeat left top;
}

.box  h2 {
   background:url(images/top-right.gif) no-repeat right top;
   padding-top:5%;
}

.box h2, .box p{
   padding-left: 5%;
   padding-right:5%;
}

在这个示例中，我以em为单位设置框的宽度，所以在浏览器中增加文本尺寸时框会伸展（见图3-9）。当然，可以用百分数设置宽度，这使框根据浏览器窗口的尺寸进行扩展或收缩。这是弹性和灵活布局背后的主要原则之一，在本书后面会进一步讨论这些原则。

图3-9  灵活的圆角框会随着文本尺寸的增加进行水平和垂直扩展