大家好,欢迎来到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-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^)\\\~~~
谢谢各位读者们啦(^_^)∠※
!!!
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/22243.html