style border-radius用法

2024年1月31日发(作者：)

style border-radius用法

border-radius属性用于设置元素的边框的圆角。

它可以接受一个或多个值，每个值代表边框的圆角大小。如果只提供一个值，它将应用于所有四个角。如果提供两个值，第一个值将应用于左上和右下角，第二个值将应用于右上和左下角。如果提供四个值，它们将依次应用于左上、右上、右下和左下角。

值可以是长度值（如px、em、rem等），也可以是百分比值。也可以使用关键字“%”来指定一个半径，表示相对于元素的宽度的百分比。

下面是几个示例：

border-radius: 10px; // 所有四个角的圆角半径都为10像素

border-radius: 10px 20px; // 左上和右下角的圆角半径为10像素，右上和左下角的圆角半径为20像素

border-radius: 10px 20px 30px; // 左上角的圆角半径为10像素，右上角和左下角的圆角半径为20像素，右下角的圆角半径为30像素

border-radius: 10% 20%; // 所有四个角的圆角半径都为相对于元素宽度的百分比，左上角为10%，右上角为20%，右下角和左下角相同

此外，还可以使用关键字“inherit”来继承父元素的border-radius值，使用“initial”来恢复默认的border-radius值。

border-radius属性还可以与其他相关属性（如border-width、border-color等）结合使用来进一步自定义边框样式。