CSS3定义各种圆角边框语法规则及实例border

在CSS3推出之前定义圆角边框需要借住背景图片来完成，CSS3新增了border-radius定义圆角边框属性，用它可以直接定 义各类圆角边框，从此定义圆角边框不需要再借住背景图片。

border-radius属性是在原来CSS2.1的 border 的后面加了一个 radius（半径），在这里也就是圆角边框的意思。为了便 于理解，我们先粗略的看 border-radius 的语法规则，然后再看具体实例，自已操练一翻就掌握了。

一、border-radius的语法规则如下：

border-radius：[ | ]{1,4} [ / [ | ] {1,4} ]?

规则说明：

1、border-radius 最多有两个参数，它们用 / 分隔；前一个参数表示水平半径（必选），后一个参数表示垂直半径（可 选）；如果后一个参数省略，则默认使用前一个参数值；

2、每个参数既可以用具体数字设置又可以用百分比设置；

length：表示用具体数值设置半径长度；

percentage：表示用百分比设置半径长度；

3、花括号中的值（{1,4}）表示半径的取值范围，无论是水平半径还是垂直半径都可以取1到4个值，取不同值的含义如下 （以水平半径为例）：

1）只设置一个数值，侧四个角都用该值；

2）设置两个数值，侧每个值用于其对角，即第一个用于 top-left（上左）和 bottom-right（下右），第二个用于 top-right（上右）和 bottom-left（下左）；

3）设置三个数值，第一个和第三个用于其对角，第二个用于两个角，即第一个用于 top-left（上左），第二个用于 top-right（上右）和 bottom-left（下左），第三个用于 bottom-right（下右）；

4）设置四个数值，第一个用于 top-left（上左），第二个用于 top-right（上右），第三个用于 bottom-right（下右 ），第四个用于 bottom-left（下左）；

其实这些顺序不用记，当设置这些值时，网站开发环境（如 Visual Studio）通常会自动提示。

二、border-radius定义圆角边框实例

border-radius的参数分为水平半径和垂直半径，而它们又有一到四个参数，为便于预览不同参数的圆角边框效果，每种 情况都举一个实例。

1、只设置水平半径

html 代码：

效果图：

2、设置水平半径和垂直半径

html 代码：

效果图：