css怎么制作圆角

使用 border-radius 属性

在 CSS 中，border-radius 属性用于创建圆角效果。该属性可以接受一个或多个值，用于定义元素的四个角的圆角半径。

.element {
  border-radius: 10px;
}

设置不同圆角半径

可以为元素的四个角分别设置不同的圆角半径。值的顺序为左上、右上、右下、左下。

.element {
  border-radius: 10px 20px 30px 40px;
}

水平和垂直半径

border-radius 还可以分别指定水平和垂直半径，用斜杠分隔。

.element {
  border-radius: 10px 20px / 30px 40px;
}

单独设置某个角的圆角

如果需要单独设置某个角的圆角，可以使用以下属性：

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

.element {
  border-top-left-radius: 10px;
  border-bottom-right-radius: 20px;
}

百分比值

border-radius 也可以使用百分比值，相对于元素的宽度和高度计算。

.element {
  border-radius: 50%;
}

椭圆形状

通过设置不同的水平和垂直半径，可以创建椭圆形状的圆角。

.element {
  border-radius: 50% / 20%;
}

浏览器兼容性

border-radius 属性在现代浏览器中广泛支持，包括 Chrome、Firefox、Safari 和 Edge。对于旧版浏览器，可能需要添加厂商前缀。

.element {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}