CSS3提供了5种圆角属性

border-radius ：同时设置4个边框的圆角样式。

border-top-left-radius ：设置左上角边框的圆角样式。

border-top-right-radius ：设置右上角边框的圆角样式。

border-bottom-left-radius ：设置左下角边框的圆角样式。

border-bottom-right-radius ：设置右下角边框的圆角样式。

 

border-*-radius属性的值可分别设定水平半径和垂直半径；若省略垂直半径，则垂直半径默认采用水平半径的值。

而每个值，支持的单位有固定长度和百分比。若设置百分比格式，则水平半径的百分比是指边框的宽度，而垂直半径的百分比是指边框的高度。

组合如下(以border-radius为例)：

1) border-radius:20px; // 表示圆角的水平半径和垂直半径都为20px长度。

2) border-radius:20px/40px; // 表示圆角的水平半径的长度为20px，垂直半径的长度为20px。

3) border-radius:20%; // 表示圆角的水平半径和垂直半径都为各自边框长度的20%。

 

border-radius 1~4个参数说明

border-radius可以一次性对四个角设置相同的值，也可以对4个角分别设置圆角样式。

而秘诀就在于设定border-radius的参数个数。

首先看下CSS规范对border-radius的参数说明：[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

可得知border-radius的参数个数范围为1~4个，这里要注意点水平半径和垂直半径的分别使用时：在border-radius中先设置4个边角的水平半径再设置4个边角的垂直半径。

4) border-radius:20%/30%; // 表示圆角的水平半径为边框宽度的20%，垂直半径都为边框高度的20%。

5) border-radius:20px/30%; // 表示圆角的水平半径长度20px，垂直半径都为边框高度的20%。


怎么样，通过上面三个段落的介绍，相信您一定对网站建设中CSS border-radius边框圆角怎么设定的问题了解了，那就赶快去到您建设的客户网站里空间站下吧。