CSS系列之圆角边框(CSS3)

CSS系列之圆角边框(CSS3)圆角边框(CSS3)

大家好,欢迎来到IT知识分享网。


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-radiusborder-top-right-radiusborder-bottom-right-radiusborder-bottom-left-radius 简写为一个属性。

5.2、取值

  • <length>

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

  • <percentage>

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

6、示例:正方形变成圆

border-radius: 50%;

效果图:

在这里插入图片描述

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

写在最后

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

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/22243.html

(0)
上一篇 2024-01-07 11:00
下一篇 2024-01-10 20:15

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信