border-radius属性的基本语法格式如下:
border-radius:1-4 length | % / 1-4 length | %;
其中length用于设置对象的圆角半径长度,不可为负值。如果"/“前后的值都存在,那么”/“前面的值设置其水平半径,”/“后面的值设置其垂直半径。如果没有”/",则表示水平和垂直半径相等。另外,它的4个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设置的。如果省略bottom-left,则其与top-right相同;如果省略bottom-right,则其与top-left相同;如果省略top-right,则其与top-left相同。
border-radius是一种缩写方式,其实border-radius和border的属性一样,还可以把各个角单独拆分出来,也就是以下4种写法,其参数都是先Y轴然后X轴,具体写法如下:
border-top-left-radius: //左上角
border-top-right-radius: //右上角
border-bottom-right-radius: //右下角
border-bottom-left-radius: //左下角