本节将重点研讨用 CSS 定义中的 border 属性实现 2px 的圆角。如果我们细分析一下 2px 圆角（如下图所示），不难发现在边框的左右角实际各相差了 1px 的距离：
如果这样的话，我们就可以利用 CSS 定义某一区块一个像素高的线型，同时让其左右都相差一个像素就可以实现这样的效果了。先看下面的实例：
提示：您可以先修改部分代码再运行
结构代码：
结构代码很简单，用三个 dl 实现圆角边框的整体框架。line 主要显示上、下二条横线效果，line_c 主要显示左、右二条竖线效果，信息都将放在 line_c 中显示。
CSS定义：
dl {
padding:0px;
margin:0px;
}
说明：定义其缩进值与内边距值为0.
.line {
margin:0px 1px;
height:1px;
line-height:1px;
font-size:0px;
background:#ccc;
overflow: hidden;
}
说明：定义区块的高（height:1px; ）、背景颜色（background:#ccc; ），以实现1px线条的效果，这个定义将用于圆角边框的上、下区域。定义这个区块左右的缩进值分别为1px（margin:0px 1px; ），以实现上图分析时圆角的效果，同时使用 margin 可以在不同背景使用圆角边框时时保持圆角的透明性。
.line_c {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
background:#fff;
}
说明：定义区块的左、右边线分别为一个像素灰色实线（border-left: 1px solid #ccc; 、border-right: 1px solid #ccc; ）与白色背景（background:#fff; ）。
在理解了上述原理后，实现一个 2px 圆角边框就很简单了。如果我们进一步应用，则可以在上面的基础上实现多种色彩的圆角边框，可以查看下面的应用示例。这个应用方式称为包含选择符，我们将在后面重点探讨。
<h4>红圆角边框</
<divclass="red">
<dlclass="line"></dl>
<dlclass="line_c">红圆角边框</
<dtclass="line"></dt>
</div>dl>h4>
<
h4
>
蓝圆角边框
</
<
div
class
="blue"
>
<
dl
class
="line"
>
</
<
dl
class
="line_c"
>
蓝圆角边框
</
<
dl
class
="line"
>
</
</
div
>
dl
>
dl
>
dl
>
h4
>
<
div
class
="abc"
>
<
div
>
<dlclass="line">
</dl>
<dlclass="line_c">
圆角边框1
</dl>
<dlclass="line">
</dl>
</div>
<ul>
<div>
<dlclass="line">
</dl>
<dlclass="line_c">
圆角边框2
</dl>
<dlclass="line">
</dl>
</div>
</ul>
</div>
Copyright © 2003- PowerEasy Yahu All Rights Reserved.
