css边框圆角怎么设置

css 中使用 border-radius 属性为元素设置圆角边框，可指定一个或四个长度值，分别表示四个角的圆角程度：一个值：适用于所有角。两个值：水平和垂直半径，适用于所有角。三个值：左上、右上和右下角。四个值：左上、右上、右下和左下角。

CSS 圆角边框设置

在 CSS 中，可以使用 border-radius 属性为元素设置圆角边框。border-radius 属性值是一个或四个长度值，分别表示元素四个角的圆角程度：

• 一个值：应用相同的圆角半径到所有四个角。
• 两个值：水平半径和垂直半径，应用于所有四个角。
• 三个值：左上、右上和右下角的半径。
• 四个值：分别应用于左上、右上、右下和左下角。

语法：

border-radius: <length-value> | <percentage-value> | inherit;</percentage-value></length-value>

示例：

立即学习“前端免费学习笔记（深入）”；

圆角矩形

.rounded-rectangle {
  border-radius: 10px;  /* 所有角半径为 10px */
}

椭圆形按钮

.oval-button {
  border-radius: 50%;  /* 所有角半径为 50%，即形成一个圆形 */
}

不同角的圆角半径

/* 左上、右上、右下、左下角半径分别为 10px、20px、30px、40px */
.different-radii {
  border-radius: 10px 20px 30px 40px;
}

注意：**

• 圆角半径不能大于元素的宽度或高度一半。
• inherit 值可继承父元素的圆角半径设置。