第 1 页：3px灰色圆角边框及原理 第 2 页：2px圆角边框实现及原理 第 3 页：3px灰色圆角边框及原理 第 4 页：利用含选择符实现多样式圆角边框应用

　　一般来说，在网页设计中直角边框的制作比较简单，只要定义其边框（border）属性及值就可以了（如border: 1px solid #d3d3d3; ）。在 CSS3 还没成为通用样式前，要实现圆角边框则要复杂一些。不过如果理清了思路，实现起来也并不是很困难，本文就重点分析圆角边框制作的实现原理及其应用示例。

　　下面是一个圆角边框的样式：

 　　要实现这样的圆角边框，我们有二种方式可以选择：

　　1、用 CSS 定义中的 border 属性实现圆角边框。如果是 2px 的圆角，这种方式的实现还简单些；若圆角比较大，则不容易实现了。网上也有许多研讨利用纯 CSS 定义实现圆角的方法，但其复杂程度相对高些，暂且不用为本文探讨的范围。
　　2、利用 CSS 定义背景图片实现圆角边框。其自由度要高很多。如果结合 CSS 包含选择符的功能，则可以进行各种应用，这个将作为本文重点探讨的内容。

　　本文章将重点探讨以下几个问题：

　　1、2px圆角边框实现及原理
　　2、3px灰色圆角边框及原理
　　3、利用含选择符实现多样式圆角边框应用