精通CSS圆角框

3.2  圆角框

    对基于CSS的设计最初的批评意见之一是CSS太死板了,只能建立方框。为了解决这个问题,人们开始创建具有曲线的设计。圆角框很快成为最时髦的CSS技术之一。创建圆角框有好几种方法。每种方法各有优缺点,对这些方法的选择主要依赖于实际情况。

    3.2.1  固定宽度的圆角框

    最容易创建的是固定宽度的圆角框。它们只需要两个图像:一个图像用于框的顶部,另一个用于底部。例如,假设希望创建图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:418px;
     background: #effce7 url(images/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  样式更特殊的圆角框

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

 

    

    <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.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所写的文章。

转至:http://www.educity.cn/help/HTMLCSS/200709121621271836.htm

Posted by Mars.Lei

posted @ 2009-01-11 22:05  silverPerson  阅读(839)  评论(0编辑  收藏  举报