现在我们来定位这此图片——并且这里就是精妙之处。图片rounded-left.gif 将对齐于top以形成左上方的角（图5-21），然后再次被使用，对齐于bottom，形成左下方的角。
图5-21 当依附到顶边时，除非框增到足够大而被暴露，否则图片下面的圆角是显示不出来的
只要框不会超过图片高，那么那个没有用上的，隐藏起来的圆角就不会显示（（这也解释了为什么我们开始时将图片做得足够高）。相应的，对于rounded-right.gif，也会被使用两次——作为右上和右下圆角。
运用最好的判断力来决定将这些图片做得多高和多宽，当然主要是取决于框内部会放些什么类型的内容。留出一些多作空间，以便应付意料之外的文字大小和内容量。
现在我们继续操作，给HTML代码应用样式，并且将所有的设计整合在一起。
3.应用样式 因为不想给框赋予一个固定的宽度，并且还希望那些圆角总是紧挨着框中的内容，所以浮动这个容器。将容器浮动能防止框自动变得和窗体（或者其他外围容器对象）一样宽。取而代之，框里面的内容的宽度将决定框伸展多宽。
.container {
float: left;
color: #666;
}
除了将框左浮动，我们还设定了框中文本的基本颜色：深灰色。
接下来，按照我们的策略将这两张背景图片放到HTML代码中那四个可用的对象上。首先将右上角作为外围主窗口的背景，将rounded-right.gif依附于其右上位置，使用图片的上半部分。
.container {
float: left;
color: #666;
background: url(img/rounded-right.gif) top right no-repeat;
}
注意我们是通过将图片定位到对象的右上方来设置背景。
结果如图5-22，rounded-right.gif 的上面部分显示出来成为了整个容器的背景。
图5-22 将图片对齐到右上角显示出了圆角效果
按照代码顺序，容器之后的对象就是第一个段落，我们使用了一个class="desc"（desc表示description）来标记它。然后我们将rounded-left.gif对齐到top和left，它的上半部分作左上圆角。这里我们还将<p>对象的默认margin和padding都高为0。稍后我们再根据需要加上全适的padding值。
精品推荐
