"border-radius属性可以赋予1到4个值。每个值表示四个角的圆角半径,按顺序应用于左上角、右上角、右下角和左下角。每个值可以是一个长度值,也可以是一个百分比值。
当只有一个值时,它被应用于所有四个角,使所有角都具有相同的圆角半径。
当有两个值时,第一个值被应用于左上角和右下角,第二个值被应用于右上角和左下角。
当有三个值时,第一个值被应用于左上角,第二个值被应用于右上角和左下角,第三个值被应用于右下角。
当有四个值时,分别按顺序应用于左上角、右上角、右下角和左下角。
示例代码如下:
/* 使用一个值 */
border-radius: 10px;
/* 使用两个值 */
border-radius: 10px 20px;
/* 使用三个值 */
border-radius: 10px 20px 30px;
/* 使用四个值 */
border-radius: 10px 20px 30px 40px;
这些值可以是像素(px)、百分比(%)或其他长度单位。通过调整这些值,可以创建不同的圆角效果,使元素的边框更加柔和和美观。
注意,如果值为百分比,它是相对于元素的边框盒子的尺寸计算的。例如,一个值为50%的border-radius表示圆角的半径等于元素边框盒子的宽度或高度的一半。
总结来说,border-radius属性可以赋予1到4个值,用于设置元素的圆角效果。通过调整这些值,可以创建不同形状的圆角。"