[css] border-radius是多可以赋多少个值?

165 阅读1分钟

"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个值,用于设置元素的圆角效果。通过调整这些值,可以创建不同形状的圆角。"