属性说明

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

语法

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
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏