名为top-left.gif、top-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:#effce7 url(images/bottom-left.gif)
    no-repeat left bottom;
    }

    

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

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

    添加两个额外的无语义元素是不理想的。如果只有很少的几个框，那么这是可以容忍的。但是，如果用到圆角框的地方很多，那么可以使用JavaScript（和DOM）添加额外元素。关于这个主题的更多细节，请参考http://tinyurl.com/82y8l上456 Berea Street的Roger Johansson所写的文章。

购买《精通CSS:高级Web标准解决方案》：http://shop.csai.cn/itbook/itbookinfo.asp?lbbh=10014414

[1]  [2]  [3]