6.4 CSS3中新增的边框圆角效果

在CSS3标准没有制定之前，如果想要实现圆角效果，需要花费很大的精力，但在CSS3标准推出之后，网页设计者可以使用border-radius属性轻松实现圆角效果。

6.4.1 案例14——设置圆角边框

在CSS3中，可以使用border-radius属性定义边框的圆角效果，从而大大降低了圆角开发成本。border-radius的语法格式如下所示。

border-radius ： none | <length>{1,4} [ / <length>{1,4} ]?

其中，none为默认值，表示元素没有圆角。<length>表示由浮点数字和单位标识符组成的长度值，不可为负值。

【例6.16】（案例文件：ch06\6.16.html）

在IE 11.0浏览器中浏览效果如图6-18所示，可以看到网页中，段落边框以圆角显示，其半径为10像素。

图6-18 定义圆角边框

6.4.2 案例15——指定两个圆角半径

border-radius属性包含两个参数值：第一个参数表示圆角的水平半径，第二个参数表示圆角的垂直半径，两个参数通过斜线（“/”）隔开。如果仅含一个参数值，则第二个值与第一个值相同，表示的是一个1/4的圆。如果参数值中包含0，则这个值就是代表矩形，不会显示为圆角。

【例6.17】（案例文件：ch06\6.17.html）

在IE 11.0浏览器中浏览效果如图6-19所示，可以看到网页中，显示了两个圆角边框，第一个段落圆角半径为5px/50px，第二个段落圆角半径为50px/5px。

图6-19 定义不同半径的圆角边框

6.4.3 案例16——绘制四个不同圆角边框

在CSS3中，实现四个不同圆角边框，其方法有两种：一种是使用border-radius属性，另一种是使用border-radius的衍生属性。

1. border-radius属性

利用border-radius属性可以绘制四个不同圆角的边框，如果直接给border-radius属性赋四个值，这四个值将按照top-left、top-right、bottom-right、bottom-left的顺序来设置。如果bottom-left值省略，其圆角效果和top-right效果相同；如果bottom-right值省略，其圆角效果和top-left效果相同；如果top-right的值省略，其圆角效果和top-left效果相同。如果为border-radius属性设置4个值的集合参数，则每个值表示每个角的圆角半径。

【例6.18】（案例文件：ch06\6.18.html）

在IE 11.0浏览器中浏览效果如图6-20所示，可以看到网页中，第一个div层设置了四个不同的圆角边框，第二个div层设置了三个不同的圆角边框，第三个div层设置了两个不同的圆角边框。

图6-20 设置四个圆角边框

2. border-radius衍生属性

除了上面设置圆角边框的方法之外，还可以使用如表6-11列出的属性单独为相应的边框设置圆角。

表6-11 定义不同圆角

【例6.19】（案例文件：ch06\6.19.html）

在IE 11.0浏览器中浏览效果如图6-21所示，可以看到网页中，设置了两个圆角边框，分别使用border-top-left-radius和border-bottom-right-radius指定。

图6-21 绘制指定圆角边框

6.4.4 案例17——绘制不同种类的边框

border-radius属性可以根据不同半径值，来绘制不同的圆角边框。同样也可以利用border-radius来定义边框内部的圆角，即内圆角。需要注意的是，外部圆角边框的半径称为外半径，内边半径等于外边半径减去对应边的宽度，即将边框内部的圆的半径称为内半径。

通过外半径和边框宽度的不同设置，可以绘制出不同形状的内边框。例如绘制内直角、小内圆角、大内圆角和圆。

【例6.20】（案例文件：ch06\6.20.html）

在IE 11.0浏览器中浏览效果如图6-22所示，可以看到网页中，第一个边框内角为直角，第二个边框内角为小圆角，第三个边框内角为大圆角，第四个边框为圆。

图6-22 绘制不同种类的边框

提示

当边框宽度设置大于圆角外半径，即内半径为0，则会显示内直角，而不是圆直角，所以内外边曲线的圆心必然是一致的，见例6.20中第一种边框设置。如果边框宽度小于圆角半径，则内半径小于0，则会显示小幅圆角效果，见例6.20中第二个边框设置。如果边框宽度设置远远小于圆角半径，则内半径远远大于0，就会显示大幅圆角效果，见例6.20中第三个边框设置。如果设置元素相同，同时设置圆角半径为元素大小的一半，则会显示圆，见例6.20中第四个边框设置。