border-radius

"border-radius" 是CSS中用于设置边框圆角的属性。它可以让元素的边框以圆角的形式呈现，使得元素的外观更加美观。该属性可以指定一个或四个值，分别对应元素四个角的圆角半径。

如果只指定了一个值，表示四个角的圆角半径都相同；如果指定了两个值，第一个值表示左上角和右下角的圆角半径，第二个值表示右上角和左下角的圆角半径；如果指定了三个值，第一个值表示左上角的圆角半径，第二个值表示右上角和左下角的圆角半径，第三个值表示右下角的圆角半径；如果指定了四个值，则分别表示左上角、右上角、右下角和左下角的圆角半径。

值可以是一个长度值（如像素、百分比），也可以是一个相对值（如 em、rem）。如果值为百分比，则相对于元素的宽度来计算。

示例：设置所有角的圆角半径为 10px

div {
  border-radius: 10px;
}

示例：设置左上角和右下角的圆角半径为 10px，右上角和左下角的圆角半径为 20px

div {
  border-radius: 10px 20px;
}

示例：设置左上角的圆角半径为 10px，右上角和左下角的圆角半径为 20px，右下角的圆角半径为 30px

div {
  border-radius: 10px 20px 30px;
}

示例：设置所有角的圆角半径为 50%

div {
  border-radius: 50%;
}

相关问题

Border-radius

`border-radius` 是 CSS 属性，用于设置元素的边框圆角。它可以接受一个或四个值，分别表示四个角的圆角半径。

当只提供一个值时，表示四个角的圆角半径都相等，如 `border-radius: 10px;`。

当提供两个值时，第一个值表示左上角和右下角的圆角半径，第二个值表示右上角和左下角的圆角半径，如 `border-radius: 5px 10px;`。

当提供四个值时，分别表示左上角、右上角、右下角和左下角的圆角半径，如 `border-radius: 5px 10px 15px 20px;`。

例如，以下代码将一个元素的四个角都设置为 10 像素的圆角：

div {
  border-radius: 10px;
}

以下代码将一个元素的左上角和右下角设置为 10 像素的圆角，右上角和左下角设置为 20 像素的圆角：

div {
  border-radius: 10px 20px;
}

以下代码将一个元素的左上角、右上角和右下角设置为 10 像素的圆角，左下角设置为 20 像素的圆角：

div {
  border-radius: 10px 10px 20px 10px;
}

BORDER-RADIUS

BORDER-RADIUS是CSS中用来设置元素圆角的属性。它可以接受一个或多个值，每个值代表一个圆角的半径大小。例如，border-radius: 10px; 表示四个角的圆角半径都是10像素。如果只想设置某一个角的圆角半径，可以使用border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius这四个属性来分别设置。