CSS系列之圆角边框（CSS3）

1、border-top-left-radius

用来设置元素左上角的圆角效果。这段圆弧（角）可以是圆或椭圆的一部分。如果其中有一个值为0，那么将无圆角效果。

1.1、属性值

• radius

可以是 <length> 或者 <percentage>，表示左上角边框的圆角半径。

• horizontal

可以是 <length> 或者 <percentage>，表示椭圆的水平半长轴在被用作边框左上角的半径。

• vertical

可以是 <length> 或者 <percentage>，表示椭圆的垂直半长轴在被用作边框左上角的半径。

注意：

要不一个值，代表radius，要不就是horizontal和vertical取值。

1.2、取值

• <length>

<length> 定义圆形半径或椭圆的半长轴，半短轴。不能用负值。

• <percentage>

使用百分数定义圆形半径或椭圆的半长轴，半短轴。水平半轴相对于盒模型的宽度；垂直半轴相对于盒模型的高度。不能用负值。

2、border-top-right-radius

设置元素的右上角弧形，这个圆弧可能是一个椭圆，或者其中一个值是0的话，就是没有圆弧，换句话就是说拐角是方形的。

2.1、属性值

• radius

可以是 <length> 或者 <percentage>，标志着圆的半径在这个拐角用作边框。

• horizontal

可以是 <length> 或者 <percentage>，标志着椭圆的水平半长轴在这个拐角被用作边框。

• vertical

可以是 <length> 或者 <percentage>，标志着椭圆的垂直半长轴在这个拐角被用作边框。

注意：

要不一个值，代表radius，要不就是horizontal和vertical取值。

2.2、取值

• <length>

标志着圆弧半径的大小或者椭圆的半长轴或半短轴，它属性值的数据类型表示任意单位通过 <length>，负值是无效的。

• <percentage>

标志着圆弧半径的大小或者椭圆的半长轴或半短轴，水平轴的百分值是相对盒模型的宽度，垂直轴的百分值是相对盒模型的宽度，负值是无效的。

3、border-bottom-right-radius

设置元素的右下角弧形。圆角可以是圆或椭圆，或者当其中一个值为0时，圆角将不被设置，这时这个角将展示为直角。

3.1、属性值

• radius

可以是 <length> 或者 <percentage>，标志着圆的半径在这个拐角用作边框。

• horizontal

可以是 <length> 或者 <percentage>，标志着椭圆的水平半长轴在这个拐角被用作边框。

• vertical

可以是 <length> 或者 <percentage>，标志着椭圆的垂直半长轴在这个拐角被用作边框。

注意：

要不一个值，代表radius，要不就是horizontal和vertical取值。

3.2、取值

• <length>

标志着圆弧半径的大小或者椭圆的半长轴或半短轴，它属性值的数据类型表示任意单位通过 <length>，负值是无效的。

• <percentage>

标志着圆弧半径的大小或者椭圆的半长轴或半短轴，水平轴的百分值是相对盒模型的宽度，垂直轴的百分值是相对盒模型的宽度，负值是无效的。

4、border-bottom-left-radius

设置元素左下角的圆角。圆角可以是圆或椭圆，或者当其中一个值为0时，圆角将不被设置，这时这个角将展示为直角。

4.1、属性值

• radius

可以是 <length> 或者 <percentage>，标志着圆的半径在这个拐角用作边框。

• horizontal

可以是 <length> 或者 <percentage>，标志着椭圆的水平半长轴在这个拐角被用作边框。

• vertical

可以是 <length> 或者 <percentage>，标志着椭圆的垂直半长轴在这个拐角被用作边框。

注意：

要不一个值，代表radius，要不就是horizontal和vertical取值。

4.2、取值

• <length>

标志着圆弧半径的大小或者椭圆的半长轴或半短轴，它属性值的数据类型表示任意单位通过 <length>，负值是无效的。

• <percentage>

标志着圆弧半径的大小或者椭圆的半长轴或半短轴，水平轴的百分值是相对盒模型的宽度，垂直轴的百分值是相对盒模型的宽度，负值是无效的。

5、border-radius

设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。

5.1、属性构成

该属性是一个 简写属性，是为了将这四个属性 border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和 border-bottom-left-radius 简写为一个属性。

5.2、取值

• <length>

<length> 定义圆形半径或椭圆的半长轴，半短轴。负值无效。

• <percentage>

使用百分数定义圆形半径或椭圆的半长轴，半短轴。水平半轴相对于盒模型的宽度；垂直半轴相对于盒模型的高度。负值无效。

6、示例：正方形变成圆

border-radius: 50%;

效果图：

• 以上效果图矩形的圆角， 就不要用百分比了，因为百分比会是表示高度和宽度的一半。
• 而我们这里矩形就只用用高度的一半就好了。

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！