/* 语法 */ border-radius: value1 value2 value3 value4; /* 示例 */ border-radius: 10px; /* 四个角都设置为10像素 */ border-radius: 10px 20px; /* 左上角、右下角设置为10像素,左下角、右上角设置为20像素 */ border-radius: 10px 20px 30px 40px; /* 分别设置左上角、右上角、右下角、左下角的像素值 */ /* 值的意义 */ value1: 左上角半径 value2: 右上角半径 value3: 右下角半径 value4: 左下角半径
除了使用像素值以外,border-radius属性还支持使用百分比和em作为单位来设置圆角的大小。此外,大家还可以使用特殊值「50%」来将元素变成一个完整的圆形。
如果大家想以不同的方式设置每个角的圆角半径,可以使用「/」来分隔属性值。例如:
border-radius: 10px 20px 0 0/20px 30px; /* 左上角10像素,右上角20像素,右下角顶部不圆角,左下角顶部20像素,底部30像素 */
最后,大家还可以使用border-top-left-radius、border-top-right-radius、border-bottom-left-radius和border-bottom-right-radius属性来单独设置某个角的圆角半径。