圆角css

/* 圆角 CSS 示例代码 */

/* 单个元素四角都设置为圆角 */
.element {
  border-radius: 10px;
}

/* 分别设置四个角的圆角半径 */
.element {
  border-top-left-radius: 10px;    /* 左上角 */
  border-top-right-radius: 20px;   /* 右上角 */
  border-bottom-right-radius: 30px;/* 右下角 */
  border-bottom-left-radius: 40px; /* 左下角 */
}

/* 使用简写方式设置不同角度的圆角 */
.element {
  border-radius: 10px 20px 30px 40px;
}

/* 设置不同方向的圆角，第一个值是水平半径，第二个值是垂直半径 */
.element {
  border-radius: 10px / 20px;
}

解释说明：

• border-radius 属性用于设置元素的圆角。它可以接受一个或多个值来定义圆角的半径。
• 如果只提供一个值，则所有四个角都会应用相同的圆角半径。
• 可以分别设置每个角的圆角半径，使用 border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和 border-bottom-left-radius。
• 简写方式 border-radius: 10px 20px 30px 40px 分别对应左上角、右上角、右下角和左下角的圆角半径。
• 还可以设置不同方向的圆角半径，例如 border-radius: 10px / 20px，其中第一个值是水平半径，第二个值是垂直半径。