3.应用样式
因为不想给框赋予一个固定的宽度，并且还希望那些圆角总是紧挨着框中的内容，所以浮动这个容器。将容器浮动能防止框自动变得和窗体（或者其他外围容器对象）一样宽。取而代之，框里面的内容的宽度将决定框伸展多宽。
|
.container {
float: left;
color: #666;
background: url(img/rounded-right.gif) top right no-repeat;
}
|
注意我们是通过将图片定位到对象的右上方来设置背景。
结果如图9，rounded-right.gif 的上面部分显示出来成为了整个容器的背景。
图9 将图片对齐到右上角显示出了圆角效果
按照代码顺序，容器之后的对象就是第一个段落，我们使用了一个class="desc"（desc表示description）来标记它。然后我们将rounded-left.gif对齐到top和left，它的上半部分作左上圆角。这里我们还将<p>对象的默认margin和padding都高为0。稍后我们再根据需要加上全适的padding值。
|
.container {
float: left;
color: #666;
background: url(img/rounded-right.gif) top right no-repeat;
}
.desc {
margin: 0;
padding: 0;
background: url(img/rounded-left.gif) top left no-repeat;
}
|
加上第二张背景图片后的结果见图10，左上圆角加好了。
图10 将图片对齐于左上角后，部分圆角效果出来<
征集网
素材中国┊上海网站建设┊橡树动画┊教育装备
交互设计
大赛征集
看酷站
当前位置：首页
> 教程 > HTML/CSS
> 正文
在线编辑：angel
本文链接：
