| 处理圆角需要对四张图片的合适安置—每个圆角用一张。每个圆角都要独立出来，以便框能够在各个方向伸展。于是，四张图片就意味着需要四个HTML对象来作为背景图片的载体...是不是觉得有点难度呢？嘿嘿，下文会带您详细的说明～ |
|
最后一张背景图将附着在嵌套在第二个段落对象里面的<em>对象上。我们将rounded-right.gif对齐于bottom和right,显示图片的下面部分，另外好包括一定padding值，以便将框中的文字和边线有均匀的间隔。大多数浏览器会将<em>包围起来的文字显示为斜体，所以我们还要覆盖这个属性，显示正常的字体。 .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;
}
.link em {
display: block;
padding: 0 9px 9px 0;
font-style: normal;
background: url(img/rounded-right.gif) bottom right no-repeat;
}
.container a {
font-size: 130%;
color: #e70;
}
|
通常情况，<em>是一个内联对象，不会自动扩展直至和父容器宽度相同，所以不能用于背景图片的载体。但能过添加规则display: block;，将<em>变成一个块级对象，强制让它内部的任何内容都延伸到框的边界，就能解决这个问题了。此外我们将框中的链接文字设置为橙色，并且比正常情况大——因为，不可破坏的链接就该是这样子。
图12是最后完成的框的效果，通过对齐两张背景图片，创建好了四个圆角。 
图12 这就是我们的成品，“牢不可破”的矩形框
4.牢不可破的特性 正如Browse Happy例子那样的情况，请注意我们的圆角矩形框，根据其内部的文字大小和内容量的变化，能够在所有方向自由扩展和收缩。真正的牢不可破（图13） 
图13 不管有多大的文字还是多少内容，框都可以扩大再扩大
相关链接：经验之谈!解读Div+CSS网页制作误区 需要掌握的八个CSS布局技巧 实例学习CSS网页技术的基本语法
|
您现在的位置: 软件资讯 > 创意设计 > 网站设计 > HTML
