属性说明

border-radius是css3中设置圆角边框的一个属性,其属性值得单位可以使用:empx百分比等等

语法

border-radius: 1-4 length|% / 1-4 length|%;

每个半径的四个值的顺序是:左上角(border-top-left-radius),右上角(border-top-right-radius),右下角(border-bottom-right-radius),左下角(border-bottom-left-radius)。如果省略左下角,右上角是相同的。如果省略右下角,左上角是相同的。如果省略右上角,左上角是相同的。 “/”前的四个数值表示圆角的水平半径,后面四个值表示圆角的垂直半径

最常见属性设置形式,一个值,代表每个圆角的"水平半径"和"垂直半径"都设置为10px,

border-radius: 10px;

微信图片_20200801234116.png
设置右上角圆角水平半径为50px,垂直半径为20px

border-top-right-radius: 50px 20px;

1146927-20171201163825836-1644989397.png
设置对象的宽高的百分之50作为水平半径和垂直半径

border-radius:50%
Last modification:August 1st, 2020 at 11:49 pm
如果觉得我的文章对你有用,请随意赞赏