本节将重点研讨利用 CSS 定义背景图片实现圆角边框。先看下面的实例：
提示：您可以先修改部分代码再运行
圆角边框的结构代码：
圆角边框的结构代码很简单，将一个边框分成上（line_t）、中（line_c）、下（line_b）三个区块，第个区块分别由一对 dl 加一对 span 组成。其中 dl 将定义显示区块的右侧圆角背景，span 将定义显示区块左侧的圆角背景。
圆角边框的CSS定义：
.line_t, .line_b, .line_t span, .line_b span {
height: 3px;
font-size:0px;
overflow: hidden;
}
说明：定义上、下区块（.line_t、.line_b）和上、下区块左侧（.line_t span、.line_b span）的高度为 3px（依据圆角的高度而定），为使得区块能达到这个高度值，还需要定义区块的 font-size 和 overflow 这二个属性。
.line_t span, .line_b span {
width: 3px;
float: left;
background: url(/skin/yahu/images/line_tb_l.gif) no-repeat left top;
}
说明：定义上、下区块左侧宽度与图片。其宽度为定义为 3px（依据圆角的宽度而定），使用浮动（float: left; ）使得 span 元素居于左侧，同时定义这二个 span 元素的背景图片。
.line_t, .line_b {
background: url(/skin/yahu/images/line_tb_r.gif) no-repeat right top;
}
说明：定义上、下区块这二个 span 元素的背景图片。
.line_b, .line_b span {
background-position: right -3px;
}
说明：因为上、下区块和上、下区块左侧都使用了同一个图片，且下区块左侧背景与下区块背景在图片制作上有相同的特性：都居于右侧（right ）且向下移动 3px（即 -3px），因此只需定义背景图片的定位（background-position）即可。
.line_c {
border-left: 1px solid #d3d3d3;
border-right: 1px solid #d3d3d3;
overflow: hidden;
height: 100%;
}
说明：因为中间的区块只需要灰色红，因此定义其左右的边框（border）的样式与颜色即可。若中间的区块使用图片，则需要再定义中间右侧（.line_c）和中间左侧（.line_c span）背景，这是进一步的应用定义，可参阅后一页内容。
圆角边框所需图片：
在上面的 CSS 定义中，可以看到上、下区块和上、下区块左侧都使用了同一个图片，且下区块左侧与下区块背景在 CSS 定义中只定义了其背景图片的定位（background-position），是因为在图片的制作中是有一定的应用的。
为方便 CSS 定义和减少图片数量，第一张图片用于圆角边框的左侧顶部和左侧底部，将左侧所需的上下二个圆角都放在一张图片中，每个圆角都是 3px 正方形。
第二张图片用于圆角边框的右侧顶部和右侧底部，将右侧所需的上下二个圆角都放在一张图片中，每个圆角都是 3px 高度的长方形，为考虑今后不同宽度的圆角边框应用，建议将宽度尽可能做宽些（如宽 1000px 等）。
结合上述 CSS 定义与这二张图片，应该比较清楚下区块左侧背景与下区块背景（.line_b,、.line_b span）的 CSS 为什么只需要定义背景图片的定位（background-position: right -3px; ）了。如果能真正明白了上述圆角定义的原理，那就能明白后面所要讲述的内容了。
如果您够细心，应该发现在上述结构代码中，圆角边框外围的<div>本身并没有指定 CSS ，这样有什么目的吗？下面我们进一步进入圆角边框 CSS 定义的应用内容，看看若将这一个圆角边框成为通用定义时，我们还可以如何进一步进行应用。
Copyright © 2003- PowerEasy Yahu All Rights Reserved.
