1HTML代码结构
要一个宽度不固定的框，事情变得有些复杂了。宽度不固定，就意味着这个框在水平和垂直方向都有足够灵活的变化。
为什么说这更难一些呢为它需要对四张图片的合适安置——每个圆角用一张。每个圆角都要独立出来，以便框能够在各个方向伸展。于是，四张图片就意味着需要四个HTML对象来作为背景图片的载体。
有一些实现办法包括在样式表中使用“生成内容”，即使用：before和:after伪类来为单独的一个对象加上多张背景图。这种方法的问题在于，在编写本书的时候，Internet Explore(IE)还不支持“生成内容”，因些相当大数量的用户就将无法看到圆角效果。
那怎么办呢果一个固定的宽度已经预先确定，那就能很容易地使用本章上一节中给出的那种方法，只背景图片：一张用于显示顶部的左右圆角，另一张显示底部的左右圆角。准备好两个HTML对象来做图片载体并不是难题。可是当要求实现宽度不固定的框时，为了让IE用户也能看到一样的设计效果，那就是加上额外的HTML代码了。
圆角化
以下是Web标准的能人，也是本书的技术编辑Ethan Marcotte在解决Browse Happy网站所面临这样的问题时的做法(图1)
图2 这个圆角矩形框可以往任何方向扩展
Ethan 没有给框设定固定的宽度，而使用了一种对前面提到过的“滑动门”技术的变通方法，使得当内容文字增多(或增大)时，框在水平和竖直方向都能伸缩(图3)。
图4 我们建的框的HTML代码给我们提供了四个可用作背景图片载体的对象
结构图：
图6 这张名为rounded-left.gif 的图片包括了左上和左下圆角
再如图7，rounded-right.gif 是一张类似的图片：它负责显示右边的上下两个图角，以及上，右和下边线。这张图片和rounded-left.gif 的高度相同，并且也比原本所需的尺寸要宽很多。
图8 当依附到顶边时，除非框增到足够大而被暴露，否则图片下面的圆角是显示不出来的
只要框不会超过图片高，那么那个没有用上的，隐藏起来的圆角就不会显示((这也解释了为什么我们开始时将图片做得足够高)。相应的，对于rounded-right.gif，也会被使用两次——作为右上和右下圆角。
运用最好的判断力来决定将这些图片做得多高和多宽，当然主要是取决于框内部会放些什么类型的内容。留出一些多作空间，以便应付意料之外的文字大小和内容量。
现在我们继续操作，给HTML代码应用样式，并且将所有的设计整合在一起。
3应用样式
3.应用样式
因为不想给框赋予一个固定的宽度，并且还希望那些圆角总是紧挨着框中的内容，所以浮动这个容器。将容器浮动能防止框自动变得和窗体(或者其他外围容器对象)一样宽。取而代之，框里面的内容的宽度将决定框伸展多宽。
.container {
float: left;
color: #666;
background: url(img/rounded-right.gif) top right no-repeat;
}
注意我们是通过将图片定位到对象的右上方来设置背景。
结果如图9，rounded-right.gif 的上面部分显示出来成为了整个容器的背景。
图10 将图片对齐于左上角后，部分圆角效果出来了。
接下来，添加左下圆角，通过给第二个段落(我们给它标记了class=”link”)指定rounded-left.gif的下面部分作为背景。这张图的上面部分，我们之前通过将图片对齐于top和left来显示，现在则将它对齐于bottom和left，以显示出下面的圆角。使用的间隔。第二个段落的三个侧边加了9px的padding,以此给内容和框的边界之间添加合适的间隔。第二个段落的左侧也加了9px的padding.这个值和图本身的宽度相同，以便让”Indestructible!”链接文字后面的圆角能显露出来。
.container {
float: left;
color: #666;
background: url(img/rounded-right.gif) top right no-repeat;
}
.desc {
margin: 0;
padding: 9px 9px 0 9px;
background: url(img/rounded-left.gif) top left no-repeat;
}
.link {
margin: 0;
padding: 0 0 0 9px;
background: url(img/rounded-left.gif) bottom left no-repeat;
}
到目前为止的结果见图11，四个圆角中有三个已经被加在了正确位置，还剩最后一个了。
图12 这就是我们的成品，“牢不可破”的矩形框
4.牢不可破的特性
正如Browse Happy例子那样的情况，请注意我们的圆角矩形框，根据其内部的文字大小和内容量的变化，能够在所有方向自由扩展和收缩。真正的牢不可破(图13)
图13 不管有多大的文字还是多少内容，框都可以扩大再扩大
相关资源：软件测试管理中软件项目需求分析总结_需求分析小结-其它代码类…
来源：爱吃面的喵
声明：本站部分文章及图片转载于互联网，内容版权归原作者所有，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！